关于非中文或者url文本不换行的问题

原创已于 2026-03-05 10:40:48 修改 · 859 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

于 2024-10-27 06:48:37 首次发布

CSS 同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

我在一个写一个简单的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>