让p标签里文字不换行,以省略号结束

发布期:2024-04-12 | 来源处:本站 | 编辑者:站长助手 | 浏览量:0
12
04
2024

开发网站前端网页的人,都清楚,P标签都是自动转行的。有时候我们只需要页面显示一行内容,又不想改后端程序,又不想用JS截取,那么有什么简单的办法让p标签里文字不换行,以省略号结束呢?


image.png


小编实测只需要几行css就可以实现,悄悄告诉你,不止p标签可以用哦,其余用法小伙伴们自行测试


//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;

//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;


如果你需要,可以试试,对正在开发前端网站的工用,有很好的作用噢!



TAG 标签:

网站优化专区

本月热点资讯
热线(微信同号):
137-6042-7131
在线客服:
售前
售前
售前
售后
微信图标
联系微信:
微信联系二维码
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

咨询送礼现在提交,将获得全宝鑫公司策划专家免费为您设计
创意LOGO,免费设计您满意的名片。
下单送礼感恩多年,新老用户下单即送创业型空间+域名等大礼
8:30-18:00小时免费咨询热线137-6042-7131
建站留言合作意向表

您需要的服务

您关注的地方

您大概的预算

直接咨询