介绍 <李> & lt; ! DOCTYPE HTML>
& lt; html>
& lt; head>
,,,& lt; meta charset=皍tf-8"比;
,,,& lt; title> cline-clamp
,,,& lt; style>,,,,
,,,,,,,,,,,.box {
,,,,,,,,,,,,,,,宽度:,200 px;
,,,,,,,,,,,,,,,身高:,300 px;
,,,,,,,,,,,,,,,边界:1 px solid 黑色;
,,,,,,,,,,,}
,,,,,,,,,,,p {
,,,,,,,,,,,,,,,,显示:,-webkit-box;
,,,,,,,,,,,,,,,,-webkit-box-orient:,垂直的;
,,,,,,,,,,,,,,,,,-webkit-line-clamp:, 4,,,,,,,,,,,,,/*设置p元素最大4行,父元素需填写宽度才明显*/,,,,,,,,,,,,,,,,,文本溢出:,省略;
,,,,,,,,,,,,,,,,,溢出:,隐藏;
,,,,,,,,,,,,,,,,/*,autoprefixer: off */,,,,,,,,,,,,,,,,-webkit-box-orient:,垂直的;
,,,,,,,,,,,,,,,,,/*,autoprefixer:提醒*/,,,,,,,,,,,,,,,,,/*因为代码环境的关系-webkit-box-orient被过滤掉了,autoprefixer 这个关键字可以免除被过滤的动作*/自动换行:break-word;
单词分割:打破所有;
时间/style>}, & lt;
时间/head> & lt;
& lt; body>,
& lt; div 类=癰ox"祝辞,
,,,& lt; p>,静态:对象遵循常规直流上,右,下,左等属性不会被应用只相对:,对象遵循常规流,并且参照自身在常规流中的位置通过,对了,下,左属性进行偏移时不影响常规流中的任何元素只绝对:对象脱离常规流,使用,右,下,左等属性进行绝对定位,
,,,& lt;/p>,
时间/div> & lt;
时间/body> & lt;
& lt;/html>
本篇文章给大家分享的是有关怎么在CSS3中使用line-clamp属性控制文本行数,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
说明:限制在一个块元素显示的文本的行数。
-webkit-line-clamp是一个不规范的属性(不支持的WebKit属性),它没有出现在CSS规范草案中。
为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:
显示:-webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。
<李>-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。
<李>文本溢出,可以用来多行文本的情况下,用省略号”……“隐藏超出范围的文本。
今天接到优化需求,帖子列表里的内容要求缩略至3行,并带,只要,白马王子,,省略号
效果如下:
自动换行:break-word;
单词分割:打破所有;
以上就是怎么在CSS3中使用line-clamp属性控制文本行数,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
