CSS 控制文本换行和空白符处理,可以使用 white-space 和 word-wrap 属性。
white-space 属性用于定义如何处理元素中的空格、换行符和制表符。常见的取值有:normal、nowrap、pre、pre-wrap 和 pre-line。其中,nowrap 表示禁止在元素内换行,而 pre、pre-wrap 和 pre-line 会保留原始的换行符和空格,其中 pre-wrap 还会自动打断长单词和 URL。因此,可以通过设置 white-space 属性来控制不同情况下的换行处理。
word-wrap 属性指定是否允许浏览器中断过长的单词或 URL 来拆分到下一行显示。常见的取值有:normal、break-word 和 anywhere。其中,break-word 表示可以在任意字符处断开单词或 URL 并换行显示,因此可以通过设置 word-wrap 属性来防止长单词或 URL 破坏布局。
举例说明:
p {
white-space: nowrap; /* 禁止换行 */
}
pre {
white-space: pre-wrap; /* 保留原始换行和空格 */
word-wrap: break-word; /* 在单词或 URL 的任意字符处进行拆分,保证布局不被破坏 */
}
需要注意的是,使用 white-space 和 word-wrap 属性时,我们需要考虑到不同场景下的需求,并综合考虑布局效果和用户体验。