如何防止长词破坏我的 div? [英] How to prevent long words from breaking my div?
问题描述
自从从 TABLE 布局切换到 DIV 布局后，仍然存在一个常见问题:
Ever since switching from TABLE-layout to DIV-layout, one common problem remains:
问题:您用动态文本填充您的 DIV，不可避免地会有一个超长的词延伸到您的 div 列的边缘，使您的网站看起来不专业.
PROBLEM: you fill your DIV with dynamic text and inevitably there is a super-long word that extends over the edge of your div column and makes your site look unprofessional.
RETRO-WHINING:这在表格布局中从未发生过.表格单元格总是会很好地扩展到最长单词的宽度.
RETRO-WHINING: This never happened with table layouts. A table cell will always nicely expand to the width of the longest word.
严重性:我在大多数主要网站上都看到了这个问题，尤其是在德语网站上，即使是限速"等常用词也很长(Geschwindigkeitsbegrenzung").
SEVERITY: I see this problem on even the most major sites, especially on German sites where even common words such as "speed limit" are very long ("Geschwindigkeitsbegrenzung").
有没有人对此有可行的解决方案?
Does anyone have a workable solution to this?
推荐答案
软连字符
您可以通过插入软连字符 (­) 来告诉浏览器在何处拆分长单词:
Soft hyphen
You can tell browsers where to split long words by inserting soft hyphen (­):
averyvery­longword
可以呈现为
非常长的词
或
averyvery-
长字
averyvery-
longword
一个不错的正则表达式可以确保除非必要，否则不会插入它们:
A nice regular expression can ensure you won't be inserting them unless neccessary:
/([^s-]{5})([^s-]{5})/ → $1­$2
浏览器和搜索引擎足够聪明，可以在搜索文本时忽略这个字符，而 Chrome 和 Firefox(尚未测试其他人)在将文本复制到剪贴板时会忽略它.
Browsers and search engines are smart enough to ignore this character when searching text, and Chrome and Firefox (haven't tested others) ignore it when copying text to clipboard.
另一种选择是注入 <wbr>，一个以前的 IE-ism，现在是 在 HTML5 中:
Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:
averyvery<wbr>longword
不带连字符的中断:
非常
长字
您可以使用零宽度空格字符​(或​)实现相同的效果.
You can achieve the same with zero-width space character ​ (or ​).
仅供参考，还有 CSS hyphens: auto 受最新的 IE、Firefox 和 Safari 支持(但目前不支持 Chrome):
div.breaking {
hyphens: auto;
}
但是，断字是基于断字词典，不能保证断字.不过，它可以使对齐的文本更漂亮.
However that hyphenation is based on a hyphenation dictionary and it's not guaranteed to break long words. It can make justified text prettier though.
这篇关于如何防止长词破坏我的 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 布局不好，但
display:table 在其他元素上很好.它将像老式桌子一样古怪(和弹性):
<table> for layout is bad, but display:table on other elements is fine. It will be as quirky (and stretchy) as old-school tables:div.breaking {
display: table-cell;
}
overflow 和 white-space: pre-wrap 下面的答案也很好.
overflow and white-space: pre-wrap answers below are good too.
登录
关闭
