CSS 设置文字只显示一行,多余显示省略号
1 .view-text{ 2 /** 3 思路: 4 1.设置inline-block属相 5 2.强制不换行 6 3.固定高度 7 4.隐藏超出部分 8 5.显示“……” 9 */ 10 display: inline-block; 11 white-space: nowrap; 12 width: 100%; 13 overflow: hidden; 14 text-overflow:ellipsis; 15 }
显示两行
1 <div class="text2">css指的是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</div> 2 3 /** 4 思路: 5 1.超出的文本隐藏 6 2.溢出用省略号显示 7 3.溢出不换行 8 4.将对象作为弹性伸缩盒子模型显示 9 5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) 10 6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数 11 */ 12 .text2{ 13 width:200px; 14 word-break:break-all; 15 display:-webkit-box; 16 -webkit-line-clamp:2; 17 -webkit-box-orient:vertical; 18 overflow:hidden; 19 }
标签:显示,省略号,设置,webkit,overflow,CSS From: https://www.cnblogs.com/tcyweb/p/16739241.html