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

本篇文章为大家展示了使用css怎么实现超出两行显示省略,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

css实现超出两行显示省略的方法:首先创建一个HTML示例文件,然后在身体中定义好文字内容,最后在风格中通过设置属性“-webkit-line-clamp: 2;溢出:隐藏。”来实现超出省略效果。

<强> css实现文本超过部分,超出两行,超出部分省略号显示

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

& lt; style> 　　每分钟{ 　　,,,宽度:,200 px; 　　,,,溢出:,隐藏; 　　,,,文本溢出:,省略; 　　,,,白色空间:,nowrap;} 　　} 　　& lt;/style> 　　& lt; body> 　　,,,& lt; p 类=皃"比; 　　,,,,,,,我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 　　,,,& lt;/p> 　　& lt;/body>

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

& lt; style> 　　每分钟{ 　　,,,宽度:,200 px; 　　,,,单词分割:,打破所有; 　　,,,文本溢出:,省略; 　　,,,显示:,-webkit-box; 　　,,,-webkit-box-orient:,垂直的; 　　,,,-webkit-line-clamp:, 2,,/*,这里是超出几行省略,*/,,,溢出:,隐藏; 　　} 　　& lt;/style> 　　& lt; body> 　　,,,& lt; p 类=皃"比; 　　,,,,,,,我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本 　　,,,& lt;/p> 　　& lt;/body>

上述内容就是使用css怎么实现超出两行显示省略,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。

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