鏈接文本比父母

Question

大我有一個div，並且該div裏面是一個鏈接

<div class="something"> 
<a href="#">Databases</a> 
</div> 

的問題是，當我把我的div的寬度，小則寬，該鏈接的文本是。該鏈接的文本只是在父div之外。

我想要的是文本突破了新的一行。

我該如何解決這個問題？

Answer 1

使用CSS word-break規則。

a { 
    word-break:break-all; 
} 

jsFiddle example

Answer 2

試試這個

a{ 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

JsFiddle Demo

Answer 3

你應該在錨<a>標籤使用word-break屬性。

a{ 
    word-break: break-all; 
} 

作爲this documentation解釋，這將由於

除「正常」軟渦卷機會工作，線可以任何兩個字母之間打破（除非由「線斷」禁止屬性）。連字符不適用。

只要文本到達容器的邊界，就會強制單詞分裂，並打破新行。

Answer 4

您可以使用CSS來告訴瀏覽器打破了字，因此它會多個單詞：

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

Answer 5

.something a { 
    /* see http://stackoverflow.com/a/7256972/315935 for details */ 
    word-wrap: break-word;  /* IE 5.5+ and CSS3 */ 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
    white-space: -pre-wrap;  /* Opera 4-6 */ 
    white-space: -o-pre-wrap; /* Opera 7 */ 
    white-space: pre-wrap;  /* CSS3 */ 
    overflow: hidden; 
    height: auto !important; 
    vertical-align: middle; 
}