在前端开发中，文本的排版和处理是非常重要的一环。在 Material Design 中，对于文本的处理有着非常详细和严谨的规定。本文将会重点讨论 Material Design 中如何处理换行和截断文本，并给出实际的代码示例。
换行
在 Material Design 中，对于文本的换行有着明确的规定：在容器边界内，文本应该自动换行，而不是超出容器边界。这一规定的目的是为了保证容器的整体美观和可读性。
在实际开发中，我们可以使用 CSS 的 word-break 和 overflow-wrap 属性来实现自动换行的效果。下面是一段示例代码：
.container { width: 200px; word-break: break-all; overflow-wrap: break-word; }
在上述代码中，我们使用了 word-break: break-all 和 overflow-wrap: break-word 两个属性来实现自动换行的效果。其中，word-break 属性用于控制单词的断行方式，break-all 表示单词内部也可以断行；overflow-wrap 属性则用于控制在单词内部断行时的处理方式，break-word 表示在单词内部断行时会尽量保证每个单词的完整性。
截断
在 Material Design 中，对于文本的截断也有着明确的规定：截断的文本应该以省略号（...）表示，而不是直接截断。这一规定的目的是为了保证截断后的文本仍然能够传达足够的信息，同时避免截断后的文本过于生硬和不美观。
在实际开发中，我们可以使用 CSS 的 text-overflow 和 white-space 属性来实现截断文本并添加省略号的效果。下面是一段示例代码：
.container { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
在上述代码中，我们使用了 white-space: nowrap 属性来控制文本不换行，使用了 overflow: hidden 属性来控制文本溢出时隐藏，最后使用了 text-overflow: ellipsis 属性来表示截断后添加省略号。
需要注意的是，上述代码只适用于单行文本的截断。如果需要截断多行文本，我们可以使用 JavaScript 来实现。下面是一个简单的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ---------------- ----- ----- ----- --- ----- ----------- ---------- ----- --- --- ---- ----- ----- ------ ------- ---------------- ------------- ------ -------- ----- ------- - ----------------------------------- ----- --- - ------------------------------- --- ----------- - ----- ----------------------------- -- -- - -- ------------- - ----------------------------- - -------- --------------- - ----- ------ - ---- - ----------------------------- - ---- --------------- - ----- ------ - ----------- - ------------- --- --------- ------- ---------- - ------ ------ -------- ----- --------------- ------- - -------- - -------- ------------ ------------------- --------- ------------------- -- --------- ------- -------------- --------- - --------展开代码
在上述代码中，我们使用了 -webkit-line-clamp 属性来控制多行文本的截断，并使用 JavaScript 来实现展开和收起的功能。需要注意的是，-webkit-line-clamp 属性只适用于 WebKit 内核的浏览器，如果需要兼容其他浏览器，可以使用 display: -webkit-box 和 -webkit-box-orient: vertical 属性来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2ae54a941bf7134531cce
