在前端开发中，经常需要对文本进行截断和省略处理。CSS Flexbox 是一种流行的布局方式，能够有效地进行文本截断和省略处理。本文将介绍如何利用 CSS Flexbox 实现文本截断和省略，以及一些值得注意的技巧和实践经验。
文本截断
在 CSS Flexbox 布局中，我们可以使用 flex 属性来实现文本截断。flex 属性可以控制弹性盒子（flex container）的伸缩性，同时可以限制子元素（flex item）的尺寸。以下是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- - - ------ ------------ ------- --------- ------- -------------- --------- -
在上面的例子中，我们用 display: flex 定义了一个弹性容器，用 flex-wrap: wrap 实现了换行。每个子元素（item）使用 flex: 0 0 200px，其中 flex-grow: 0 表示不允许伸展， flex-shrink: 0 表示不允许收缩， flex-basis: 200px 表示初始宽度为 200px。
为了实现文本截断，我们使用了 white-space: nowrap，表示文本不允许换行；overflow: hidden，表示溢出隐藏；text-overflow: ellipsis，表示超出部分用省略号代替。
这样，当文本超出 200px 时，就会被截断并用省略号代替。具体效果如下所示：
文本省略
有时候，我们希望在一定的空间范围内尽可能地显示更多的文本，同时又不希望内容溢出或者失去美观。CSS Flexbox 可以帮助我们实现文本省略效果。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- - - -- --------- ------- -------------- --------- ------------ ------- -
在上面的例子中，我们将每个子元素的 flex-basis 属性设为 0，这使得它们将基于剩余空间平均分配自己的宽度。然后，我们使用 white-space: nowrap 防止文本换行，使用 overflow: hidden 隐藏溢出部分，并使用 text-overflow: ellipsis 将溢出部分用省略号代替。
这样，当空间不足以完全容纳文本时，文本就会被自动省略并且显示省略号。具体效果如下所示：
值得注意的技巧
- 在文本截断和省略处理中使用
flex属性可以有效地控制弹性盒子和子元素的尺寸。 - 必须设置
white-space: nowrap参数才能实现文本截断和省略。 text-overflow: ellipsis属性只有在overflow: hidden或overflow: auto时才有效。- 如果文本中包含多个空格，可以使用
word-break: break-word，让浏览器在空格处进行换行，以避免有一排只有一个单词的情况。 - 避免将
flex-basis设置为百分数，因为它只能根据父元素的宽度进行分配，而与父元素的高度无关。
总结
本文介绍了如何使用 CSS Flexbox 实现文本截断和省略处理，同时提供了一些值得注意的技巧和实践经验。通过灵活地运用这些技术和方法，我们可以在前端开发中优化用户体验和提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462e162968c7c53b03f067a