css：浮動div中重疊標題h1

我有一個包含三個內部div的div，它們都是向左漂移的。這個漂浮應該代表三列。到目前爲止，everthing沒問題。css：浮動div中重疊標題h1

但是，如果我在每個內部div中添加標題並且標題要寬，標題將重疊。

的圖像將顯示它比1000個字：

enter image description here

（對不起，外部鏈接，但由於我是新來的我沒有足夠的信譽分發表圖片:)）

我的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。不知道在這種情況下是否重要。

任何想法，我可以做什麼，解決它？

來源

2014-05-15 nki

我認爲word-break，使用它可以指定，如果你想在單詞中斷線，會做的伎倆：

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

jsFiddle demo.

你可以閱讀更多關於word-break財產here。

來源

2014-05-15 23:34:09

你好，Daniel，謝謝。但這會削減這個詞。對我來說這不是解決方案。是否有可能使用這種方法只包裝整個單詞？ – nki

@ user3642823是的，有'white-space：pre-line'這樣做，但是由於這個詞可能很長，以至於它也不適合下一行，所以如果你不喜歡，你應該使用@ScoreNinja的解決方案不想「切」字。他/她的解決方案創建一個滾動條，因此保留整個單詞原樣。 –

一般來說，不可能像普通文字一樣包裝標題？對我來說，這是一個不太令人滿意的解決方案，使它可以滾動或隱藏它：/ – nki

您可以使用

.column { overflow: hidden; }

截斷頁眉或

.column { overflow-x: scroll; }

，使其滾動。

來源

2014-05-15 23:37:16 ScorNinja

css：浮動div中重疊標題h1

回答

相關問題