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

您可以详细了解word-break属性 here 。

Answer 2

您可以使用

.column { overflow: hidden; }

截断标题或

.column { overflow-x: scroll; }

使其可滚动。