css单词强制换行符

CSS单词强制换行符

基础概念

CSS单词强制换行符（Word Break）用于控制文本在容器中的换行行为。当文本内容过长且无法在一行内完全显示时，单词强制换行符可以决定文本如何断行。

类型

CSS提供了几种不同的单词换行属性：

word-break: normal;：默认值，遵循常规的断字规则。
word-break: break-all;：允许在单词内换行。
word-break: keep-all;：主要用于中文、日文、韩文等语言，不允许在单词内换行，只能在空格处换行。
word-break: break-word;：如果一个单词太长无法在一行内显示，则在单词内部进行换行。

应用场景

网页内容展示：在新闻网站、博客等需要展示大量文本内容的场景中，合理使用单词换行可以提高用户体验。
表单输入：在输入框中，防止用户输入过长的文本导致输入框溢出。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Word Break Example</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid black;
        }
        .break-all {
            word-break: break-all;
        }
        .keep-all {
            word-break: keep-all;
        }
        .break-word {
            word-break: break-word;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个普通的文本示例。</p>
    </div>
    <div class="container break-all">
        <p>这是一个非常非常非常长的单词，break-all会使其在任何地方换行。</p>
    </div>
    <div class="container keep-all">
        <p>这是一个非常非常非常长的单词，keep-all会使其在空格处换行。</p>
    </div>
    <div class="container break-word">
        <p>这是一个非常非常非常长的单词，break-word会使其在必要时在单词内部换行。</p>
    </div>
</body>
</html>