CSS-文本溢出的显示效果，如何处理溢出的部分，空白部分的处理，如何实现单行文本溢出显示省略号

青旅半醒 2023-06-08 06:28 13阅读 0赞

### text-overflow ###

`text-overflow` 设置在文本溢出时的显示效果

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clip</td> 
   <td>对溢出的文本进行修剪</td> 
  </tr> 
  <tr> 
   <td>ellipsis</td> 
   <td>使用使用省略号来显示溢出的文本</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>使用给定的字符来表示溢出的文本（string 为指定的字符）</td> 
  </tr> 
 </tbody> 
</table>

该样式属性需要与 `overflow` 结合使用

### overflow ###

`overflow` 设置内容溢出元素时如何处理溢出的部分

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible</td> 
   <td>可见，不进行裁剪，默认值</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>文本溢出时显示滚动条，通过拖动滚动查看溢出的内容</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>文本溢出时直接隐藏，不可见</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>自动，溢出时会显示滚动条</td> 
  </tr> 
 </tbody> 
</table>

想要实现实现文本溢出显示省略号，还需要结合 `white-space` 样式属性

### white-space ###

`white-space` 用于处理元素中空白的部分

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>默认,空白会被浏览器忽略（代码中的空白部分）</td> 
  </tr> 
  <tr> 
   <td>nowrap</td> 
   <td>文本不会换行，文本会在在同一行上显示，直到遇到 <code>&lt;br/&gt;</code> 标签为止</td> 
  </tr> 
  <tr> 
   <td>pre</td> 
   <td>空白会被浏览器保留, 作用类似于<code>&lt;pre&gt;</code> 标签</td> 
  </tr> 
 </tbody> 
</table>

##### 实现单行文字溢出时省略号 #####

div.box { 
      width: 120px;
      height: 100px;
      background-color: #FFFFCB;
    }

<div class="box">
      这是一段文本，用于测试溢出是否隐藏
    </div>

![在这里插入图片描述][20191017095129176.png]  
首先让文本在一行显示

/*文本在一行显示*/
    white-space: nowrap;

![在这里插入图片描述][20191017095156139.png]  
再设置溢出的部分隐藏

/*溢出的内容进行隐藏*/
    overflow: hidden;

![在这里插入图片描述][20191017095340212.png]  
最后设置省略号代替隐藏的部分

/*使用省略号代替隐藏的部分*/
    text-overflow: ellipsis;

![在这里插入图片描述][20191017095454950.png]

[20191017095129176.png]: /images/20230531/71240835a1ec4c5bb57dc3f17668e924.png
[20191017095156139.png]: /images/20230531/0f6897f830184dc6b13cb4667a38746c.png
[20191017095340212.png]: /images/20230531/fffbff4006a0429d8af7ea319539d38a.png
[20191017095454950.png]: /images/20230531/d7c4253773444d85b41352b2180faabf.png