我在一个写一个简单的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>本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 关于非中文或者url文本不换行的问题
发表评论 取消回复