空间已满时CSS更改行

Question

我有一个非常简单的问题。这是我code。我不想要一个卷轴，如果空间已满，例如在我的code文本中abcdefghijklmnopqrstuvwxyz位于同一行，但如果空间已满，则应更改该行，如

abcdefghijklmno
pqrstuvwxyz

知道我在这里做错了吗？

 <div id="mainContainer">   
    <div id="headlineText">  
        <div class="inner">abcdefghijklmnopqrstuvwxyz</div>
    </div>

我想要输出this

Answer 1

在#headlineText中，添加：

word-wrap:break-word;
width:280px;

您将width设置为20px这是问题：）

<强> JSFiddle Demo

Answer 2

最好的方法是在包含div上使用CSS。

.inner {
word-wrap:break-word;
}

Answer 3

关键是在内部使用以下CSS属性：word-wrap: break-word;如果它仍然溢出，容器上的CSS可能会对此产生影响。尝试从头开始重建容器CSS。也许这会解决它。

小提琴：http://jsfiddle.net/4a3rx/