CSS 文本裁剪属性探索：text-overflow 和 overflow

CSS 文本裁剪属性探索：text-overflow 和 overflow

引言：
在 Web 开发中，经常会遇到需要对文本进行裁剪的情况。CSS 提供了多种方式来实现文本的裁剪，其中包括 text-overflow 和 overflow 属性。本文将探索这两个属性，并提供具体的代码示例。

一、text-overflow 属性

1. text-overflow: clip
   当文本溢出容器边界时，会被自动裁剪，不显示在容器之外。

例：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  white-space: nowrap;  overflow: hidden;  text-overflow: clip;}</style><div class="container">  这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。</div>

1. text-overflow: ellipsis
   当文本溢出容器边界时，会用省略号来表示被裁剪的部分。

例：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}</style><div class="container">  这是一个超长的文本内容，当超出容器宽度时会被用省略号表示。</div>

二、overflow 属性

1. overflow: hidden
   当内容溢出容器边界时，会被裁剪掉，不显示在容器之外。

例：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  height: 100px;  overflow: hidden;}</style><div class="container">  <p>这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。</p></div>

1. overflow: scroll
   当内容溢出容器边界时，会增加滚动条来显示被裁剪的部分，用户可以通过滚动条来查看全部内容。

例：

立即学习“前端免费学习笔记（深入）”；

<style>.container {  width: 200px;  height: 100px;  overflow: scroll;}</style><div class="container">  <p>这是一个超长的文本内容，当超出容器宽度时会增加滚动条。</p></div>

结论：
text-overflow 属性用于控制文本溢出容器时的裁剪方式，clip 可以直接裁剪掉溢出部分，ellipsis 则使用省略号表示溢出部分。而 overflow 属性可以控制容器的溢出行为，hidden 可以裁剪掉溢出部分，scroll 则增加滚动条来显示内容。在实际项目中，可以根据需求选择合适的属性来实现文本的裁剪效果。

尽管 text-overflow 和 overflow 属性都提供了文本裁剪的功能，但它们适用的场景有所不同。text-overflow 适用于单行文本的裁剪，而 overflow 则适用于多行文本的裁剪。

希望本文对您理解并应用 text-overflow 和 overflow 属性有所帮助。