使用CSS根据父容器的静态宽度强制长文本行(不含空格)换行

Question

可能重复：

CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

假设其中一个有以下代码：

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

我很抱歉，但堆栈溢出(根据预览)没有换行代码片段。

在大多数(?)在某些情况下，以下情况会导致容纳长行文本的容器伸展到其中包含的文本的整个宽度。

我们想根据css指定的父容器宽度(宽度:100px)强制换行(甚至中间的单词)。

这可以通过一个我不知道的css标签来实现吗？

IE6+的可比性，请加上gecko/webkit/opera。

Answer 1

您可以使用下面的代码来包装：

.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 */
}

Answer 2

结合使用word-wrap和word-break可能会为您解决这个问题。请参阅How to force a line break in a loooooong word in a DIV? (可能是复制)