元素中显示n行文字且超出隐藏显示省略号

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>元素中显示n行文字且超出隐藏显示省略号</title>
    <style type="text/css">
      .div1 {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /*white-space: initial;*/
        /*
          overflow 属性规定当内容溢出元素框时发生的事情。
            >值: overflow: hidden;  溢出隐藏
          text-overflow 属性规定当文本溢出包含元素时发生的事情。
            >值: text-overflow: ellipsis;  超出文本设置为...
          display 属性设置元素如何显示。
            >值: display: -webkit-box;  将元素转换为盒子模型
          -webkit-line-clamp 属性用于限制块容器可能包含的行数。仅当显示属性设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时,此属性才有效。
            >值: -webkit-line-clamp: n; n为几,则限制几行
          -webkit-box-orient 指定div元素的子元素横向排列
            >值: -webkit-box-orient: vertical; 从顶部向底部垂直布置子元素
          white-space 属性设置如何处理元素内的空白。
            >值: white-space: initial; white-space: initial;
            >注意:若在该元素上还有父级,设置了white-space:nowrap;若想实现此效果需要在该元素中加上white-space:initial;还原换行;
        */
      }
    </style>
  </head>
  <body>
    <div class="div1">
      首先,我们通过 overflow 属性来规定: 当内容溢出元素框时会发生的事情,因为后面的内容会设置只显示 n 行,所以我们设置元素溢出隐藏,则值为 hidden;
      随即,我们通过 text-overflow 属性规定: 当文本溢出包含元素时发生的事情,我们想让文本超出部分显示为...省略号,所以我们选择值 ellipsis;
      然而,我们还需要将该元素模型进行转换,通过 display 属性设置元素如何显示,设置值为 -webkit-box 可以将元素转换为盒子模型;
      此时,我们可以限制我们需要展示的文本行数了: -webkit-line-clamp 属性用于限制块容器可能包含的行数,当然,有个限制,。仅当显示属性设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时,此属性才有效;
        那么,我们设置显示 n 行,超出n行则 溢出隐藏,显示省略号;
      前文提到: -webkit-line-clamp 属性仅当设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时,此属性才有效,那么我们设置 -webkit-box-orient,
      指定div元素的子元素横向排列,选择它的值 vertical  从顶部向底部垂直布置子元素(竖直);
      到此为止,我们 元素中显示n行文字且超出隐藏显示省略号 步骤完成;

      那么,还有一种情况:
        如果 该元素上还有父级,且设置了 white-space:nowrap; 若想实现此效果需要在该元素中加上 white-space:initial 还原换行;
    </div>
  </body>
</html>

  

上一篇:实战:内存分配与回收策略


下一篇:Flex布局