js 自动换行
时间: 2023-07-04 10:17:46 浏览: 59
在 JavaScript 中实现自动换行可以使用 CSS 的 `white-space` 属性和 `word-wrap` 属性来控制。
1. `white-space` 属性
`white-space` 属性用于设置元素中的空白如何处理。默认情况下,HTML 中的空白(空格、换行符、制表符等)会被合并为一个空格,并且不会自动换行。可以将 `white-space` 属性设置为 `pre-wrap` 或 `pre-line` 来实现自动换行。
- `white-space: pre-wrap`:保留空白符,但允许自动换行。
- `white-space: pre-line`:合并多个空格为一个,保留换行符,但允许自动换行。
```html
<div style="white-space: pre-wrap; word-wrap: break-word;">
This is a long text that needs to wrap to a new line when it reaches the end of the container.
</div>
```
2. `word-wrap` 属性
`word-wrap` 属性用于控制长单词是否可以自动换行。可以将其设置为 `break-word` 来强制换行。
```html
<div style="white-space: pre-wrap; word-wrap: break-word;">
Thisisaverylongwordthatneedstobrokenintomultiplelines.
</div>
```
以上两种方式结合使用可以实现 JavaScript 自动换行的效果。