javascript - “分裂”长话

Question

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

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

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

score 3 · Accepted Answer

您可以使用（实验性）CSS 属性hyphens：

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

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

U+2010（连字符）

“硬”连字符表示可见的换行机会。即使该行在该点实际上没有断开，连字符仍会呈现。

U+00AD (害羞)

一个不可见的“软”连字符。该字符不可见；相反，它建议浏览器在必要时可以选择中断单词的地方。在 HTML 中，您可以使用软连字符来插入。

编辑

正如@hustlerinc 所提到的，可能需要对其进行设置word-break: break-all以使其工作。

score 1 · Accepted Answer

1

您不能将 CSS 属性设置word-break为hyphenate吗？

于 2013-06-14T12:39:01.237 回答

score 1 · Accepted Answer

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

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

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

您显然可以使用一些 CSS 来实现类似的效果，请查看text-overflow属性。也许这就是这个案子的票。不需要 JS。:)

score 0 · Accepted Answer

我认为你必须自己做。

使用“split”函数，您可以将字符串拆分为单词表。然后，您可以将所有单词检查成一个 for。

4 回答 4