css：浮动 div 中重叠的标题 h1答案

【问题标题】：css: overlapping headlines h1 in floated divscss：浮动 div 中重叠的标题 h1
【发布时间】：2014-05-16 07:39:14
【问题描述】：

我有一个包含三个内部 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。不知道在这种情况下是否重要。

有什么想法可以解决吗？

【问题讨论】：

标签： html css css-float overlapping

【解决方案1】：

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

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

jsFiddle demo.

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

【讨论】：

你好丹尼尔，谢谢。但这会削减这个词。这对我来说不是解决方案。是否可以使用这种方法只包装整个单词？
@user3642823 是的 white-space:pre-line 可以做到这一点，但由于这个词可能太长以至于它也不适合下一行，如果你应该使用 @ScoreNinja 的解决方案不想“切”字。他/她的解决方案创建了一个滚动条，因此保留了整个单词。
是不是不能像一般文字一样把标题包起来？这对我来说是一个不令人满意的解决方案，使其可滚动或隐藏它：/
@nki 你的意思是连字符？喜欢 Some teeee- [NEW LINE] eeeext.
@nki 我希望你明白你必须做一些事情。要么：1）隐藏； 2）制作滚动条； 3) 断词。

【解决方案2】：

你可以使用

.column { overflow: hidden; }

截断标题或

.column { overflow-x: scroll; }

使其可滚动。

【讨论】：