使用word-wrap: break-word可防止长单词溢出，word-break控制字符间断行，white-space管理空白符处理，三者结合解决文本换行问题。
控制CSS字体文本换行主要通过几个属性来实现，包括
word-wrap、
word-break和
white-space。它们各有侧重，影响着浏览器如何处理超出容器边界的文本。
word-wrap、word-break和white-space控制
如何使用word-wrap属性控制文本换行？
word-wrap属性（现在更常用的是
overflow-wrap，效果相同，但名称更规范）用于允许浏览器在单词内部换行，防止长单词或URL地址溢出容器。它的主要作用是处理那些“不得不”换行的情况。
举个例子，假设你有一个
div，宽度有限，里面有一长串英文单词或者URL。如果不用
word-wrap: break-word;，这个长单词会直接溢出
div，破坏布局。用了之后，浏览器会在单词内部寻找合适的换行点，让它“委屈一下”换行显示。
要注意的是，
word-wrap: normal;是默认值，表示只在正常的断字点换行（比如空格、连字符）。
word-break属性详解：如何强制断字？
word-break属性比
word-wrap更激进，它控制着浏览器是否可以在任意字符之间断字，即使这个字符不在单词的中间。
word-break: break-all;会直接在任何字符间断开，简单粗暴。这在处理CJK（中文、日文、韩文）文本时尤其有用，因为这些语言的单词之间没有空格。但对于英文，可能会显得过于生硬，影响可读性。
word-break: keep-all;则相反，它会尽量保持单词完整，不进行断字。对于CJK文本，这意味着只有在遇到空格或标点符号时才会换行。
white-space属性对文本换行有什么影响？
white-space属性控制着如何处理元素中的空白符。它对文本换行的影响也很大，特别是与
word-wrap和
word-break结合使用时。
white-space: nowrap;会强制文本不换行，直到遇到
<br>标签。这在某些场景下很有用，比如制作单行文本的跑马灯效果。但如果文本太长，就会溢出容器。
white-space: pre;会保留所有的空格和换行符，类似于
<pre class="brush:php;toolbar:false;">标签。
white-space: pre-wrap;则会保留空格和换行符，并在超出容器边界时自动换行。
white-space: pre-line;会合并空格，但保留换行符。
这三个
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
pre-开头的属性，可以根据不同的需求，灵活控制文本的显示方式。
如何解决长URL地址导致的文本溢出问题？
长URL地址是导致文本溢出的常见原因。除了使用
word-wrap: break-word;，还可以考虑以下方法：
-
截断显示： 使用CSS的
text-overflow: ellipsis;
属性，将溢出的部分显示为省略号。但要注意，这需要同时设置overflow: hidden;
和white-space: nowrap;
。.url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; /* 设置容器宽度 */ } -
使用
<wbr></wbr>
标签： 在URL的合适位置插入<wbr></wbr>
标签（Word Break Opportunity），提示浏览器可以在这里换行。这比word-wrap
更精确，可以控制换行的位置，但需要手动添加。 使用JavaScript截断： 如果需要更复杂的处理，可以使用JavaScript来截断URL，并添加省略号。
如何处理中英文混合文本的换行问题？
中英文混合文本的换行问题比较复杂，因为中文没有空格，而英文有。
一种常见的做法是，对包含中文的容器设置
word-break: break-all;，允许在任意字符间断字。但这样可能会导致英文单词被错误地断开。
更好的做法是，使用JavaScript来判断文本中是否包含中文，然后根据情况设置不同的
word-break属性。
function adjustWordBreak(element) {
const text = element.textContent;
const hasChinese = /[\u4e00-\u9fa5]/.test(text); // 检测是否包含中文
if (hasChinese) {
element.style.wordBreak = 'break-all';
} else {
element.style.wordBreak = 'normal';
}
}
// 对需要处理的元素调用该函数
const myElement = document.getElementById('myElement');
adjustWordBreak(myElement);这段代码会检测元素中是否包含中文字符，如果包含，就设置
word-break: break-all;，否则设置为
word-break: normal;。
文本换行属性的兼容性问题？
word-wrap属性在较老的浏览器中可能存在兼容性问题。建议使用
overflow-wrap代替，它的兼容性更好。
word-break和
white-space属性的兼容性相对较好，但仍然建议在使用时进行测试，特别是在需要支持老版本浏览器的项目中。
总的来说，控制CSS字体文本换行需要综合考虑
word-wrap、
word-break和
white-space这三个属性，并根据具体的场景选择合适的取值。对于复杂的场景，可能需要结合JavaScript来处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
