How to force a line break in a loooooong word in a DIV?
好吧,这真的使我感到困惑。 我在div中有一些内容,例如:
1 | Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest. |
但是,由于"单词"太长,内容溢出了DIV(如预期的那样)。
如何在必要时强制浏览器"破坏"单词以适合内部所有内容?
使用[
我不确定浏览器的兼容性
1 | word-break: break-all; |
您也可以使用
(word break) means:"The browser
may insert a line break here, if it
wishes." It the browser does not think
a line break necessary nothing
happens.
可以将其添加到"跨浏览器"解决方案的公认答案中。
资料来源:
- http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
-
Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)
的CSS
1 2 3 4 5 6 7 8 9 10 11 12 | .your_element{ -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
我只是在搜索相同的问题,然后在此处发布我的最终解决方案。它也与此问题相关,所以希望您不要介意重新发布。
通过给DIV提供样式
1 2 3 4 5 | div { word-wrap: break-word; /* All browsers since IE 5.5+ */ overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */ width: 100%; } |
但是,对于表,还需要应用:
样例代码:
1 2 3 4 5 6 7 8 9 | table { table-layout: fixed; width: 100%; } table td { word-wrap: break-word; /* All browsers since IE 5.5+ */ overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */ } |
希望能帮助到别人。
发现使用flex-box并依赖
1 2 3 4 5 | .your_element { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } |
注意:如果不使用自动前缀,则可能需要添加浏览器供应商前缀。
要注意的另一件事是使用
CSS
删除
实行:
1 2 | white-space: inherit; word-break: break-word; |
我用下面的代码解决了我的问题。
1 | display: table-caption; |
从MDN:
The
overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.In contrast to
word-break ,overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
因此,您可以使用:
1 | overflow-wrap: break-word; |
我可以用吗?
首先,您应该确定元素的宽度。例如:
1 2 3 4 5 6 | aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa #sampleDiv{ width: 80%; word-wrap:break-word; } |
这样,当文本达到元素宽度时,它将分解为几行。
空白由浏览器保留。文本将在必要时自动换行并换行
1 2 3 4 | .pre-wrap { white-space: pre-wrap; word-break: break-word; } |
演示
1 2 3 4 5 6 7 8 9 10 11 | td { word-break: break-word; white-space: pre-wrap; -moz-white-space: pre-wrap; } table { width: 100px; border: 1px solid black; display: block; } |
1 2 3 4 5 6 7 8 | <table> <tr><th>list</th> <td> 1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext 2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline </td> </tr> </table> |
做这个:
1 2 3 4 5 | aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa #sampleDiv{ overflow-wrap: break-word; } |
只是尝试我们的风格
1 | white-space: normal; |