“分裂”长话

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）

     

“硬”连字符表示可见的换行机会。即使该行实际上没有被破坏，连字符仍然会被渲染。

     

U + 00AD（SHY）

     

一种看不见的“软”连字符。这个角色没有明显的呈现;相反，它建议一个浏览器可能会选择在必要时打破这个词的地方。在HTML中，您可以使用插入软连字符。

• Browser compatibilty
• MDN reference

修改

如@hustlerinc所述，可能需要设置word-break: break-all才能使其正常工作。

Answer 2

我写了一个jQuery插件，可能很适合这个目的。查看ellipsis.js。使用以下配置应该可以：

$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})

我猜这样做的好处是用户仍可以根据需要显示整个标题。

你可以通过一些CSS显然实现这样的功能，查看text-overflow属性。也许这就是这个案子的票。不需要JS。 ：）

Answer 3

您无法将CSS属性word-break设置为hyphenate吗？

示例here

Answer 4

我认为你必须自己做。

使用“split”功能，您可以将字符串拆分为单词表。然后，您可以将所有单词检查为for。