我正在使用 twitter bootstrap 为客户制作一个响应式网站,默认情况下它是响应式的。但是,当单词在 a 中变得太长时,<h1>
它不适合移动大小的浏览器。
我想做的是将“thisisaverylongword”更改为“thisisa-verylongword”,最后部分换行。
有没有一种简单的方法可以做到这一点,也许用javascript?我在想一些条件,比如“如果 $word 比 $body 宽那么”或类似的东西。如果相同的代码适用于任何单词,任何提示都会非常有用,金星。
我正在使用 twitter bootstrap 为客户制作一个响应式网站,默认情况下它是响应式的。但是,当单词在 a 中变得太长时,<h1>
它不适合移动大小的浏览器。
我想做的是将“thisisaverylongword”更改为“thisisa-verylongword”,最后部分换行。
有没有一种简单的方法可以做到这一点,也许用javascript?我在想一些条件,比如“如果 $word 比 $body 宽那么”或类似的东西。如果相同的代码适用于任何单词,任何提示都会非常有用,金星。
您可以使用(实验性)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
以使其工作。
您不能将 CSS 属性设置word-break
为hyphenate
吗?
这里的例子
我编写了一个 jQuery 插件,它可能非常适合这个目的。查看ellipsis.js。使用以下配置应该可以工作:
$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})
我想这样做的好处是用户仍然可以根据需要显示整个标题。
您显然可以使用一些 CSS 来实现类似的效果,请查看text-overflow属性。也许这就是这个案子的票。不需要 JS。:)
我认为你必须自己做。
使用“split”函数,您可以将字符串拆分为单词表。然后,您可以将所有单词检查成一个 for。