我在一个写一个简单的url展示的时候,发现url一直溢出不换行,查了各种方法不管用,我请教了我大哥,他直接甩给我两个css放进去就好了
word-break:break-all; 按字符截断换行 /* 支持IE和chrome,FF不支持*/
word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */
如果害怕兼容问题,可以把 verflow-wrap: break-word; 带上,但是一般直接把这两个扔进去,基本都能解决, 如果有解决不了的特殊的问题或者更好的方法,欢迎留言,谢谢
word-break: break-all;
- 作用:强制文本在任意字符处换行,即使在一个单词内部也会进行换行。
- 例如,
verylongwordwithoutspaces
可能会被拆分为verylo
和ngwordwithou
。 - 适用场景:适用于需要按字符截断换行的情况,特别是当文本中包含长单词或长字符串时,可以避免文本溢出容器。
- 浏览器支持:广泛支持,包括 IE、Chrome 和 Firefox
word-wrap: break-word;
(现在推荐使用 overflow-wrap: break-word;
)
浏览器兼容性
- 作用:强制文本在任意字符处换行,即使在一个单词内部也会进行换行。例如,
verylongwordwithoutspaces
可能会被拆分为verylo
和ngwordwithou
。 - 适用场景:适用于需要按字符截断换行的情况,特别是当文本中包含长单词或长字符串时,可以避免文本溢出容器。
- 浏览器支持:广泛支持,包括 IE、Chrome 和 Firefox。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Text Wrapping Example</title><style>.container {width: 200px;border: 1px solid #000;margin: 10px;padding: 10px;}.break-all {word-break: break-all;}.break-word {word-wrap: break-word; /* 旧语法 */overflow-wrap: break-word; /* 新语法,推荐使用 */}</style>
</head>
<body><div class="container break-all">ThisIsAVeryLongWordWithoutSpacesThisIsAVeryLongWordWithoutSpaces</div><div class="container break-word">ThisIsAVeryLongWordWithoutSpacesThisIsAVeryLongWordWithoutSpaces</div>
</body>
</html>