您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

css怎么实现超出两行显示省略

2026/1/2 4:17:17发布16次查看
css实现超出两行显示省略的方法:首先创建一个html示例文件;然后在body中定义好文字内容;最后在style中通过设置属性“-webkit-line-clamp: 2;overflow: hidden;”来实现超出省略效果。
本文操作环境:windows7系统、html5&&css3版,dell g3电脑
css实现文本超过部分,超出两行,超出部分省略号显示
  文字超过部分显示为省略号
<style>.p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}</style><body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 </p></body>
文本超出两行,超出部分省略号显示
<style>.p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 这里是超出几行省略 */ overflow: hidden;}</style><body> <p class="p"> 我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 </p></body>
推荐学习:《css视频教程》
以上就是css怎么实现超出两行显示省略的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product