CSS：浮动div中的标题H1重叠

Question

我有一个包括三个内部div的div，它们都向左浮动。 该浮点数应代表三列。 到目前为止，一切都很好。

但是，如果我在每个内部div内添加标题，并且标题太宽，标题将重叠。

一张图像显示的效果会好于1000个单词：

（对不起，外部链接。但是由于我是新来的，我没有足够的声誉点来发布图片:)）

我的html代码如下所示：

     <div id="content_container" class="appearance">
       <div class="column">
         <h1>My headline1111111111111</h1>
         text
       </div>
       <div class="column">
         <h1>My headline2222222222</h1>
           text
       </div>
       <div class="column">
         <h1>My headline333333333333333333333</h1>
         text
       </div>            
       <div style="clear: left;"></div>
    </div>

这是我的CSS代码：

#content_container {
  position: relative;
}

.column {
  float: left;
  width: 33.33333%;
  padding-right: 10px;
}

.appearance {
  margin: 0 auto;
  width: 60%;  
}

另一方面，content_container也是另一个包装容器的内部div。 不知道在这种情况下是否重要。

有什么想法可以解决吗？

Answer 1

我认为可以用word-break来指定是否要在一个单词内换行，它可以解决这个问题：

.column { word-break:break-all; }

jsFiddle演示。

您可以在此处阅读有关word-break属性的更多信息。

Answer 2

您可以使用

.column { overflow: hidden; }

截短标题或

.column { overflow-x: scroll; }

使它可滚动。