如何防止长话破坏我的div？ [英] How to prevent long words from breaking my div?

问题描述

从TABLE-layout切换到DIV布局后，一个常见的问题仍然存在：

PROBLEM ：文本，并且不可避免地有一个超长的单词延伸到您的div列的边缘，并使您的网站看起来不专业。

RETRO-WHINING ：这是从表格布局发生的 。表单元格总是很好地扩展到最长字的宽度。

SEVERITY ：即使是在大多数主要网站上，我也看到这个问题，特别是在德语网站上，甚至常见的字词如速度限制很长（Geschwindigkeitsbegrenzung）。

有没有人有一个可行的解决方案？

解决方案

连字符

您可以通过插入软连字符（& shy; ）告诉浏览器在何处拆分长字： / p>

  avery& shy; longword 
  

可以呈现为

averyverylongword

或

averyvery-

longword

< blockquote>

一个好的正则表达式可以确保你不会插入它们，除非有必要：

  /（[^ \s  - ] {5}）（[^ \s  - ] {5}）/→$ 1& shy; $ 2 
  

浏览器和搜索引擎足够聪明，可以在搜索文本时忽略此字符，Chrome和Firefox（未测试其他人）在将文本复制到剪贴板时会忽略此字符。 / p>

< wbr> 元素

注入< wbr> ，前 IE-ism ，现在是 ：

  averyual< wbr> longword 
  

无连字符的分隔符：

averyvery

longword

您可以使用零宽度空格字符 &＃8203; （或&＃x200B ）。

---

FYI还有 CSS 连字符：auto （但目前不是Chrome ）：

  div.breaking {
 hyphens：auto; 
} 
  

但是，连字是基于连字字典，话。

复古解决方案

< table> 是不好的，但是在其他元素上 display：table 它将像老式表一样古怪（和弹性）：

  div.breaking {
 display：table -细胞; 
} 
  

---

overflow 和 white-space：pre-wrap 下面的答案也很好。

Ever since switching from TABLE-layout to DIV-layout, one common problem remains:

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: This never happened with table layouts. A table cell will always nicely expand to the width of the longest word.

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

may be rendered as

averyverylongword

or

averyvery-
longword

A nice regular expression can ensure you won't be inserting them unless neccessary:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

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> element

Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:

averyvery<wbr>longword

Breaks with no hyphen:

averyvery
longword

You can achieve the same with zero-width space character ​ (or &#x200B).

---

FYI there's also CSS hyphens: auto supported by latest IE, Firefox and Safari (but currently not 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.

Retro-whining solution

<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 and white-space: pre-wrap answers below are good too.

这篇关于如何防止长话破坏我的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！