在实际开发中，我们经常会遇到这样一种头疼的场景：文章的标题或者简介太长了，直接把原本的排版给撑破了。
为了保持页面的整洁，我们通常希望长文本在超出一定范围后会自动隐藏，并在末尾显示一个省略号（...）的效果。
在传统 CSS 中，实现这个效果（尤其是多行省略号），我们往往需要编写一大堆极其晦涩的代码。而在 Tailwind CSS 中，这一切都被极度简化了。
Tailwind CSS 单行文本省略
在 Tailwind CSS 中，我们可以使用 “truncate” 这个类名来实现单行文本溢出显示省略号（...）的效果。
语法：
truncate说明：
只要给元素加上这个类名，当文本长度超过了盒子的宽度时，多余的文字就会被裁剪掉，并自动在末尾加上省略号（...）。
其中， truncate 类名等价于下面这段原生 CSS 代码：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;示例 1：单行文本省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 border-2 border-gray-200 p-4">
<p class="truncate text-gray-700">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给最外层的 div 限制了宽度（w-64）。由于内部文本非常长，原本是会换行的。但由于p 标签加上了 “truncate” 类名，此时 Tailwind CSS 会自动强制把文本在一行内显示（即不换行），并且在超出 w-64 宽度的地方切断，最后补上一个漂亮的省略号（...）。
Tailwind CSS 多行文本省略
单行文本截断非常简单，但多行文本截断在以前的 CSS 里可以说是一个著名的 “世纪难题”。所谓的 “多行文本截断”，指的是像文章的 “摘要部分” 或者 “商品简介” 这些部分，我们通常希望它能显示 2 行或者 3 行，然后多出来的部分再用省略号隐藏。
在 Tailwind CSS 中，我们可以使用 “line-clamp-*” 相关类名来实现多行文本截断再显示省略号的效果。
语法：
line-clamp-{行数}说明：
常用的多行截断类名如下表所示。
| 类名 | 说明 |
|---|---|
| line-clamp-1 | 限制显示 1 行 |
| line-clamp-2 | 限制显示 2 行 |
| line-clamp-3 | 限制显示 3 行 |
| line-clamp-4 | 限制显示 4 行 |
| line-clamp-none | 取消行数限制 |
其中，line-clamp-none 表示取消行数限制，常用于在响应式设计中恢复原本的显示效果。
示例 2：多行文本省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 border-2 border-gray-200 p-4">
<p class="line-clamp-2 text-gray-700">
绿叶网其实有 10 多年的沉淀了，它的前身是创办于 2015 年的 “绿叶学习网”。绿叶网是一个专业极致、富具个性的网站。在这里，我们只提供能让你眼前一亮的教程、手册、工具、图书等。
</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们给 p 标签加上了 line-clamp-2 类名之后，这段原本可能需要5、6 行才能完整显示的超长文字，在显示完第 2 行之后，就被自动截断了，并且在末尾补上了一个省略号（...）。
Tailwind CSS 长单词溢出换行
在实际开发中，我们还会经常遇到另外一种非常经典的 “文本溢出” 场景：一段连续的超长纯英文（如 URL 链接、随机字符串）把原本定好宽度的容器强行撑破了，如下图所示。
对于这种情况，我们有时候并不想用 “truncate” 把多余的链接隐藏掉，而是希望它能强制换行完整显示。
在 Tailwind CSS 中，我们可以使用 “break-all” 或 “break-words” 这两个换行类名来实现强制换行。
语法：
break-all 或 break-words说明：
break-all 相当于 word-break: break-all;，它表示允许在任何字符之间强制换行，常用于超长字符串或超长链接。
break-words 相当于 overflow-wrap: break-word;，它表示在单词的边界处进行换行（推荐使用，阅读体验更好）。
示例 3：长链接强制换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="w-64 border-2 border-red-400 p-4 mb-6">
<p class="text-gray-700">
我的个人地址是：https://www.lvyenet.com/a/very/long/path
</p>
</div>
<div class="w-64 border-2 border-green-400 p-4">
<p class="break-all text-gray-700">
我的个人地址是：https://www.lvyenet.com/a/very/long/path
</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
第 1 个红色方框被长链接硬生生地撑破了，页面布局非常难看。而第 2 个绿色的框，由于加上了 break-all 类名，长链接在触碰到边界时会自动折断换行。
常见问题
1. 为什么我给元素加了 truncate 或 line-clamp-* 类名，内部的文本还是没有出现省略号？
文本截断能够生效的前提是：这个文本必须被一个 “有明确宽度” 的容器包裹着。如果父元素没有设置宽度，那么它就会被无限长的文字一直撑开，自然就触发不了 “溢出截断” 了。
2. 可以实现 “在手机端显示 2 行、在电脑端显示 4 行” 的效果吗？
我们可以结合响应式修饰符即可，比如：
line-clamp-2 md:line-clamp-4对于响应式修饰符，我们在后面 “Tailwind CSS 响应式设计” 中会详细介绍。
