【css】超过文本显示省略号

末蓝、 2024-03-23 18:02 38阅读 0赞

显示省略号的前提：必须有指定宽度

#### 一、单行文本超出部分显示省略号 ####

<table> 
 <tbody> 
  <tr> 
   <th style="width:143px;"><strong>属性</strong></th> 
   <th style="width:145px;"><strong>取值</strong></th> 
   <th style="width:393px;"><strong>解释</strong></th> 
  </tr> 
  <tr> 
   <td style="width:143px;">overflow</td> 
   <td style="width:145px;">hidden</td> 
   <td style="width:393px;">当内容超过盒子宽度, 隐藏溢出部分</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">white-space</td> 
   <td style="width:145px;">nowrap</td> 
   <td style="width:393px;">让文字在一行内显示, 不换行</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">text-overflow</td> 
   <td style="width:145px;">ellipsis</td> 
   <td style="width:393px;">如果溢出的内容是文字, 就用省略号代替</td> 
  </tr> 
 </tbody> 
</table>

.one-line{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap
    }

#### 二、多行文本超出部分显示省略号 ####

<table> 
 <tbody> 
  <tr> 
   <th style="width:147px;"><strong>属性</strong></th> 
   <th style="width:148px;"><strong>取值</strong></th> 
   <th style="width:394px;"><strong>解释</strong></th> 
  </tr> 
  <tr> 
   <td style="width:147px;">overflow</td> 
   <td style="width:148px;">hidden</td> 
   <td style="width:394px;">当内容超过盒子宽度, 隐藏溢出部分</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">text-overflow</td> 
   <td style="width:148px;">ellipsis</td> 
   <td style="width:394px;">如果溢出的内容是文字, 就用省略号代替</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">display</td> 
   <td style="width:148px;">-webkit-box</td> 
   <td style="width:394px;">必须设置盒子属性为-webkit-box</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">-webkit-line-clamp</td> 
   <td style="width:148px;">2、3、4…</td> 
   <td style="width:394px;"> <p>设置超出几行后，超出部分显示省略号</p> <p>注：这是一个不规范的属性（unsupported WebKit property）</p> </td> 
  </tr> 
  <tr> 
   <td style="width:147px;">-webkit-box-orient</td> 
   <td style="width:148px;">vertical</td> 
   <td style="width:394px;">盒子实现多行显示的必要条件，文字垂直展示</td> 
  </tr> 
  <tr> 
   <td style="width:147px;">word-break</td> 
   <td style="width:148px;">break-all</td> 
   <td style="width:394px;"> <p>单词破坏：主要用于破坏英文单词的整体性，即在英文单词还没有在一行完全展示时就换行。</p> <p>简单的理解就是一个单词可能会被分成两行展示</p> </td> 
  </tr> 
 </tbody> 
</table>

.two-line{
      overflow:hidden;
      text-overflow: ellipsis;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient:vertical;
      -moz-box-orient:vertical;
      word-break: break-all;
    }

说明：

\-webkit-line-clamp 可以把块容器中的内容限制为指定的行数，它只有在 display设成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient设成 vertical 时才有效果。