1.长字符串换行
当遇到长文本的时候如果不设置默认情况下不会换行,如果设置容器宽度有可能会超出容器影响布局。 这时候就需要通过css word-break属性设置允许换行。
word-break: normal|break-all|keep-all;
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
2.换行符\n换行
当文本中存在换行符，想要显示时在容器中也能够自动换行，需要使用white-space属性设置自动换行。
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
