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

css实现超出两行显示省略的方法：首先创建一个HT ML 示例文件；然后在body中定义好文字内容；最后在style中通过设置属性“- webkit -line-cl am p: 2;overflow: hidden;”来实现超出省略效果。

本文操作环境：Windows7系统、HTML5@R_ 777 _315@CSS3版，DELL G3 电脑

CSS实现文本超过部分，超出两行，超出部分省略号显示

文字超过部分显示为省略号

<style>
.p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    wh IT e -s pace: nowra p; 
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

文本超出两行，超出部分省略号显示

<style>
.p{
    width: 200px;
    word- br eak: break-all;
    text-overflow: ellipsis;
    dis play : -webkit-box;
    -webkit-box-orient: vert ical ;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

推荐学习：《css视频教程》

以上就是css怎么实现超出两行显示省略的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的 css怎么实现超出两行显示省略全部内容，希望文章能够帮你解决 css怎么实现超出两行显示省略所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css怎么实现超出两行显示省略的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did199564

更新时间：2023-04-27 阅读：24次