hi,欢迎访问本站!
当前位置: 首页Web前端正文

css文本显示固定的行数

墨初 Web前端 268阅读

css是一种网页的渲染样式表,它规定的网页上的内容该如何的显示。下面我们就说一说关于CSS样式中显示文本固定行的方法,大家可以参考一下。

CSS文本显示固定的行数

想要在CSS中显示固定的行数可以使用CSS中的ine-clamp属性来实现,它限制了文本所需要的行输。

line-clamp 属性在指定的行数处截断文本。

语法:

line-clamp: normal | <integer> | initial | inherit;

例:

<style>
p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 300px;
}
</style>

<p>我们是一个内容,我们是一个内容。我们是一个内容,我们是一个内容。我们是一个内容,我们是一个内容。我们是一个内容,我们是一个内容。我们是一个内容,我们是一个内容。我们是一个内容</p>

注:

line-clamp是有缺点的,不推荐使用

1、CSS line-clamp 属性具有有限的浏览器支持。 Firefox 和 Opera Mini 等浏览器不支持它

2、它不提供省略号的任何替代方案

3、它需要多个属性配合,参考上面的示例

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐