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 }