Javascript开发必备：CSS实现文本换行全攻略及JS修改样式示例

在CSS中，可以使用`white-space`属性来控制文本的换行方式。以下是一些常用的值： 1. `nowrap`：默认值，文本在同一行内显示，不换行。 2. `pre`：保留空白符，即在HTML源码中所有的空白符在输出时也都会保留。 3. `pre-wrap`：允许文本换行，但不会自动换行，空白符会被保留。 4. `pre-line`：允许文本换行，空白符会被正常地处理（即一个空格会被转换为一个空格，一个制表符会被转换为多个空格等）。 例如： ```css .my-text { white-space: nowrap; /* 文本在同一行内显示，不换行 */ } .my-pre { white-space: pre; /* 保留空白符 */ } .my-pre-wrap { white-space: pre-wrap; /* 允许文本换行，但不会自动换行，空白符会被保留 */ } .my-pre-line { white-space: pre-line; /* 允许文本换行，空白符会被正常地处理 */ } ``` 在JavaScript中，可以通过修改DOM元素的样式来改变文本的换行方式，例如： ```javascript let myText = document.getElementById('my-text'); myText.style.whiteSpace = 'nowrap'; /* 文本在同一行内显示，不换行 */ ``` 注意：在修改元素样式时，需要确保该元素在页面上已经存在，并且具有有效的CSS选择器。 ######[AI写代码神器 | 320点数解答 | 2023-11-09 01:08:19]