CSS 之 单行或多行文本溢出显示省略号

一般的， 在文本标签中， 若不给一定的宽高， 则文本内容会跟随父元素的宽高显示， 当父元素或当前元素无 overflow: hidden属性，则溢出显示。

 

• 控制单行元素 溢出显示省略号： 

• <style>
      p.text {
          width: 100px;
          height: 30px;
          white-space: nowrap;
          overflow: hidden;   /*溢出隐藏*/
          text-overflow: ellipsis;   /*溢出显示省略号*/
      }
  </style>
  
  
  
  <p class="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

  控制多行文本溢出显示省略号

• <style>
      p.text {
          width: 100px;
          overflow: hidden;  /*溢出隐藏*/
          text-overflow: ellipsis;   /*文本溢出 显示省略号*/
  
          /* 弹性伸缩盒子模型显示 */
          display: -webkit-box;   /*  存在兼 容性*/
          /*限制文本的行数*/
          -webkit-line-clamp: 2;
          /*设置或检索伸缩盒子对象的子元素排列方式*/  
          -webkit-box-orient: vertical;
      }
  </style>
  
  
  <p class="text">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>