CSS3属性 line-clamp控制文本行数的使用
发布时间：2020-03-19 16:43:59 作者：给时光以生命 
我要评论
我要评论这篇文章主要介绍了CSS3属性 line-clamp控制文本行数的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
说明：限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
- text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
今天接到优化需求，帖子列表里的内容要求缩略至3行，并带‘…’省略号
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cline-clamp</title>
<style>
.box{
width: 200px;
height: 300px;
border:1px solid black;
}
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /*设置p元素最大4行，父元素需填写宽度才明显*/
text-overflow: ellipsis;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
/*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/
word-wrap:break-word;
word-break:break-all;
} </style>
</head>
<body>
<div class="box">
<p> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，
</p>
</div>
</body>
</html>
效果如下：
如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码即可：
word-wrap:break-word; word-break:break-all;
当然也可以使用插件clamp.js
到此这篇关于CSS3属性 line-clamp控制文本行数的使用的文章就介绍到这了,更多相关CSS3 line-clamp控制行数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了CSS flex-basis 文本溢出问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2019-12-04移动端的text-overflow多行文本溢出显示省略号(…)
这篇文章主要介绍了移动端的text-overflow多行文本溢出显示省略号(…)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2019-05-15- 这篇文章主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-13
本文给大家分享html文本溢出显示省略字符的两种常用解决方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-09
本篇文章主要介绍了纯CSS定制文本省略的方法大全，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-16- 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览2018-03-01
- 这篇文章主要介绍了css实现文本溢出显示省略号的方法和示例分享，推荐给大家。2014-12-23
- 这篇文章主要介绍了CSS实现限制字数功能当对象内文本溢出时显示省略标记，需要的朋友可以参考下2014-08-20
- 这篇文章主要介绍了用css截取字符实现文字自动截断隐藏溢出文本，需要的朋友可以参考下2014-05-19
- text-overflow有两个属性值，clip和ellipsis。要想这两个属性起真正的作用，需要配合overflow:hidden;white-space:nowrap;使用2014-03-27
最新评论