使用 CSS 根据父容器静态宽度强制一长行文本(无空格)换行
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11599859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS
提问by anonymous-one
Possible Duplicate:
CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
Lets say one has the following code:
假设有以下代码:
<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>
I apologize but stack overflow (according to the preview) does not line break code snippets.
我很抱歉,但堆栈溢出(根据预览)不会换行代码片段。
Under most (?) circumstances, the following will cause the container that holds the long line of text to stretch to the full width of the text contained within.
在大多数 (?) 情况下,以下内容将导致包含长文本行的容器拉伸到其中包含的文本的全宽。
We would like to force this to line break (even mid word) according to the css specified width (width:100px) of the parent container.
我们想根据父容器的css指定宽度(宽度:100px)强制它换行(甚至中间词)。
Is this possible via a css tag I do not know about?
这可以通过我不知道的 css 标签实现吗?
IE6+ comparability, plus gecko/webkit/opera please.
IE6+ 的可比性,请加上 gecko/webkit/opera。
回答by Mr. Alien
You can use this to wrap :
您可以使用它来包装:
.wrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
回答by Paul Fleming
A combination of word-wrap
and word-break
may solve this for you. See How to force a line break in a loooooong word in a DIV?(possible dupe)
的组合word-wrap
,并word-break
可以解决这个给你。请参阅如何在 DIV 中的 loooooong 单词中强制换行?(可能被骗)