使用CSS根据父容器静态宽度强制长文本行(无空格)换行
可能重复:使用CSS根据父容器静态宽度强制长文本行(无空格)换行,css,Css,可能重复: 假设有以下代码: <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&l
假设有以下代码:
<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>
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
很抱歉,堆栈溢出(根据预览)不会打断代码段
在大多数(?)情况下,以下情况将导致容纳长行文本的容器拉伸到包含在其中的文本的全宽
我们希望根据父容器的css指定的宽度(宽度:100px),强制将其换行(甚至是中间单词)
这可以通过我不知道的css标签实现吗
IE6+可比性,再加上gecko/webkit/opera请。将
word wrap
和word break
结合起来可能会解决这个问题。请参阅(可能的重复)您可以使用此来包装:
.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 */
}
.wrap{
空白:预换行;/*CSS3*/
空白:-moz预包装;/*Firefox*/
空格:-pre-wrap;/*Opera将在12小时内对此进行检查,并对正确答案进行投票。如果答案符合我的要求,请投票。衷心感谢。IIRCword-wrap
受所有浏览器支持。因此无需执行所有特定于浏览器的操作。@PeeHaa在Firefox 43上确认。word-wrap:break-word
工作正常。我不同意现在看空白:预包装的功能。空白:预包装在Chrome(54)中不起作用但是word-wrap:break-word
确实如此。今天在2019年,您可以只指定overflow-wrap:break-word;对于那些使用引导程序搜索同一解决方案的人来说,如果是一个没有空格的单词,则有text-break
,如果是一个有空格的文本,则有text-wrap
。