CSS 设置文字只显示一行，多余显示省略号

CSS 设置文字只显示一行，多余显示省略号

 .view-text{
   /**
     思路：
     1.设置inline-block属相
     2.强制不换行
     3.固定高度
     4.隐藏超出部分
     5.显示“……”
   */
     display: inline-block;
     white-space: nowrap; 
     width: 100%; 
     overflow: hidden;
     text-overflow:ellipsis;
 }

显示两行

 <div class="text2">css指的是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</div>
 
  /**
  思路：
      1.超出的文本隐藏
      2.溢出用省略号显示
      3.溢出不换行
      4.将对象作为弹性伸缩盒子模型显示
      5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
     6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
     */
     .text2{
       width:200px;
       word-break:break-all;
       display:-webkit-box;
       -webkit-line-clamp:2;
       -webkit-box-orient:vertical;
       overflow:hidden;
   }