繁體
首页 >> 要闻 >

互联网常识：css怎么实现超出两行显示省略

2023-03-06 19:44:01 来源： 用户： 

跟大家讲解下有关css怎么实现超出两行显示省略，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css怎么实现超出两行显示省略，小编也收集到了有关css怎么实现超出两行显示省略的相关资料，希望大家看到了会喜欢。

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怎么实现超出两行显示省略的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！

 
分享：
相关阅读
 
最新文章
大家爱看
频道推荐
站长推荐

关于我们| 联系方式| 版权声明| 免责声明|