CSS 换行|极客教程

CSS 换行

在开发网页时，我们经常需要控制文本内容的换行方式，以确保内容在页面上的展示效果达到预期。CSS 提供了多种属性来控制文本的换行方式，包括 white-space、word-break、word-wrap 和 overflow-wrap。本文将详细介绍这些属性的用法和区别，以帮助开发者更好地掌握在网页布局过程中如何处理文本的换行情况。

white-space 属性

white-space 属性用于控制元素内文本的空白符处理方式。常见取值包括 normal、nowrap、pre、pre-wrap 和 pre-line。

normal：默认值，文本按照正常的方式展示，连续的空白符会被合并为一个空格，并且换行符被当作普通的空白符处理。
nowrap：文本不换行，超出容器部分将被截断。
pre：文本保留空白符，换行符和空白符都会被保留。
pre-wrap：文本保留空白符，但会自动换行。
pre-line：连续的空白符会被合并为一个空格，但换行符会被保留。

<!DOCTYPE html>
<html>
<head>
<style>
    .text {
        white-space: pre-wrap;
        width: 100px;
        border: 1px solid black;
    }
</style>
</head>
<body>
    <div class="text">This is a long text that will wrap according to the width of the container.</div>
</body>
</html>

word-break 和 word-wrap 属性

word-break 和 word-wrap 属性用于控制英文单词或者中文单词的换行方式。

word-break 属性有三个取值，分别是 normal、break-all 和 keep-all。
- normal：默认值，依据语言的规则来断开单词或者中文字符。
- break-all：允许单词、中文字符被强制打断，即使不到达边界也会强制换行。
- keep-all：不允许单词、中文字符被打断，只在需要的地方换行。
word-wrap 属性有两个取值，分别是 normal 和 break-word。
- normal：默认值，不允许单词中断换行。
- break-word：单词中断换行。

<!DOCTYPE html>
<html>
<head>
<style>
    .text {
        word-break: break-all;
        word-wrap: break-word;
        width: 100px;
        border: 1px solid black;
    }
</style>
</head>
<body>
    <div class="text">Thisisaverylongwordthatshouldbebrokenaccordingtothewidthofthecontainer.</div>
</body>
</html>

overflow-wrap 属性

overflow-wrap 属性用来指定浏览器如何在换行时分配空间。它的常用值是 normal 和 break-word。

normal：将文本换行放置在原先字边界内。
break-word：在字的中间断行，一般用得比较多。

<!DOCTYPE html>
<html>
<head>
<style>
    .text {
        overflow-wrap: break-word;
        width: 100px;
        border: 1px solid black;
    }
</style>
</head>
<body>
    <div class="text">Thisisaverylongwordthatshouldbebrokenaccordingtothewidthofthecontainer.</div>
</body>
</html>

通过使用 white-space、word-break、word-wrap 和 overflow-wrap 这些 CSS 属性，我们可以更加灵活地控制文本的换行方式，使网页在不同设备上都能够有良好的展示效果。