站长资讯网
【推荐教程：CSS视频教程 】
当我们使用 CSS 构建布局时，考虑长短文本内容很重要，如果能清楚地知道当文本长度变化时需要怎么处理，可以避免很多不必要的问题。
在许多情况下，添加或删除一个单词会改变 UI 的外观，更糟的是，它可能会破坏原有的设计，使其无法访问。在我学习 CSS 的早期，我低估了添加或删除一个单词的作用。在本文中，我会介绍几种不同的技巧，大家可以马上使用它们来处理CSS中不同长度的文本。
问题
在讨论处理文本内容的技巧之前，先来解释一下这个问题，假设我们有一个垂直导航。
名字的长度可以变化，特别是如果你是在一个多语言网站工作。在上面的示例中，随着名称变长，它被包装到第二行。这里有一些问题
-
应该把这段文字截短吗
-
应该换成多行吗？ 如果是，最多可以换行多少行？
这种情况下单词比预期的多，但是当单词太长时会发生什么呢?默认情况下，它将溢出其容器。
作为专业前端开发人员，重要的是要确定在这种情况下应该要知道怎么处理。 幸运的是，有一些CSS属性就是专门用于解决此类问题。
除此之外，问题不仅在于长内容，短内容也会破坏UI，或者至少会让它看起来很奇怪。如下面的示例
带有ok文本的按钮的宽度非常小。我并不是说这是一个致命的问题，但它会让按钮看起来很弱或很难被注意到。
在这种情况下我们该怎么办？ 也许在按钮上设置min-width？ 无论内容长度如何，都可以提供安全的宽度。
长内容
在，大家已经对问题有所了解，我们接着深入研究CSS 技巧，这些技巧可为处理长内容提供解决方案。
overflow-wrap
CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
Hyphens
CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。
.element { hyphens: auto; }
文本截断处理
截断是指在句子的末尾添加点，以表明有