CSS不要讓元素去外面

Question

我有以下的項目一個HTML列表：

<ul> 
... 
<li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li> 
... 
</ul> 
... 

問題是，當我想象這有一個小屏幕，在EM值超出我的清單境外：

我可以在我的CSS做些什麼來讓邊框內的EM值。

Answer 1

您可以使用word-wrap: break-word

li { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    word-wrap: break-word; 
 
}

<ul> 
 
    <li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li> 
 
</ul>

或者word-break: break-all

li { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    word-break: break-all; 
 
}

<ul> 
 
    <li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li> 
 
</ul>

Answer 2

你需要一個寬度設置爲你的款，如果你想以師帶連字符的一個（或幾個）特定的字符/秒改變與媒體查詢

Answer 3

不同勢屏幕寬度，可以插入­（=「軟連字符」 ），還幾次：

<span><em>GB15MIDL&shy;400515123&shy;1111456711&shy;11111118</em></span> 

這將打破這個詞在仍然適合入行的最後一個「­」的位置。如果線路足夠長，則不會看到這些實體。