javascript - "Splitting"长字

Question

我正在使用 twitter bootstrap 为客户制作一个响应式网站，默认情况下它是响应式的。然而，当单词在 <h1> 中变得太长时它不适合移动大小的浏览器。

我想做的是将“thisisaverylongword”更改为“thisisa-verylongword”，最后一部分换行。

有没有一种简单的方法可以做到这一点，也许使用 javascript？我在想一些条件，比如“如果 $word 比 $body 宽那么”或类似的东西。任何提示都将非常有用，金星，如果相同的代码适用于任何单词。

Answer 1

您可以使用(实验性的)CSS 属性 hyphens :

h1 {
  -webkit-hyphens: manual;
     -moz-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual;
}

并使用特殊的 unicode 字符指定换行符:

U+2010 (HYPHEN)

The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.

U+00AD (SHY)

An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

• Browser compatibilty
• MDN reference

编辑

如@huSTLerinc 所述，可能需要设置 word-break: break-all使其发挥作用。