文字浮出側邊欄

文字走出我的div，並沒有固定的寬度，所以我不知道爲什麼它這樣做。側欄不應超過200px。文字浮出側邊欄

HTML

 <div id="sidebar"> 
     <div class="side_box"> 
      <div class="side_box_title"><span>VAULT FEED</span></div> 
      <div class="side_box_content"> 
       dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd 
      </div> 
     </div> 
    </div>

CSS

#sidebar { 
    max-width: 200px; 
    margin-top: 1%; 
    margin-left: 1%; 
    float: left; 
} 
.side_box { 

} 

.side_box_title { 
    height: 25px; 
    padding-top: 2px; 
    text-align: center; 
    color: white; 
} 

.side_box_content { 
    border: solid 1px; 
    padding-left: 5px; 
    padding-right: 5px; 
}

來源

2013-10-10 NullBy7e

我會去用CSS3字 - 打破財產。 - >Word break css

只需添加到.side_box_content類以下內容：

.side_box_content { 
    border: solid 1px; 
    padding-left: 5px; 
    padding-right: 5px; 


    word-break: break-all; 
}

有一展身手的： - >Test drive

乾杯！

來源

2013-10-10 23:29:19 RGLSV

非常感謝，也不能相信，我錯過了，這是完全跨瀏覽器兼容嗎？ – NullBy7e

根據[Prefixr]（http://prefixr.com/index.php）它不需要供應商的前綴，但是，有一個關於css-tricks的好文章，關於word break [檢查出來]（http： //css-tricks.com/almanac/properties/w/word-break/） – RGLSV

或者你可以用**'word-wrap：break-word;'**這兩個規則是相似的，但是**'word- break **規則將忽略任何空格，逗號或連字符，並分開單詞，而**'word-wrap' **將監視空格，逗號和連字符，並在它打破單詞之後。最後一個應該有一個最大寬度或指定的寬度，並且在塊元素上工作得最好 – RGLSV

或者你可以嘗試

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

來源

2013-10-10 23:33:10 vernak2539

文字浮出側邊欄

回答

相關問題