多行元素的文本省略号

[问答题]

多行元素的文本省略号

我要加油

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。为了实现该效果，它需要组合其他的WebKit属性） 2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示） 3、-webkit-box-orient:vertical;（和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。） 4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） 5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

发表于 2019-10-12 15:30:59 回复(1)

拯救世界的光太郎

单、多行文本溢出显示省略号：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1, .div2{
      width: 300px;
      padding: 10px;
      border: 1px solid black;
      margin: 30px auto;
      background-color: blanchedalmond;
    }

    /* 单行文本溢出显示省略号 */
    .div1 p{
      white-space: nowrap; /* 文本超过容器最大宽度不换行(若文本自动显示在一行则不需要这个属性) */
      overflow: hidden;  /* 本文超出容器最大宽度的部分不显示 */
      text-overflow: ellipsis;  /* 文本超出容器最大宽度时显示三个点 */

    }

    /* 多行文本溢出显示省略符 */
    .div2 p{
      word-break: break-word; /* 文本默认显示在一行时，需要添加该属性，让超出的文本换行 */
      overflow:hidden;
      display:-webkit-box; /* 让容器变成一个弹性伸缩盒子 */
      -webkit-line-clamp:2;  /* 最大显示的文本行数 */
      -webkit-box-orient:vertical;  /* 设置或检索伸缩盒对象的子元素纵向排列  */
    }
      
  </style>
</head>

<body>

  <div class="div1">
    <p>
      本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出
    </p>
  </div>

  <div class="div2">
    <p>
      本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出本文溢出
    </p>
  </div>

</body>
</html>