CSSは、私は以下の項目を含むHTMLリストを持っている要素は、外

Question

行かせてはいけない：

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

問題は、私は小さな画面でこれを可視化する際に、EMの値は私のリストの境界の外に出ています。

私は国境内のem値を得るために、私のCSSで何を行うことができます。

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

を使用することができますあなたの段落に幅を設定し、分裂をしたい場合は、1つ（または複数の）特定の文字/ sでハイフンでメディアクエリー

Answer 3

と切り抜いた画面の幅を変更するには、­（=「ソフトハイフン」を挿入することができます）、また、数回：

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

これはまだラインに収まる最後の「­」の位置に言葉を中断します。行が十分に長い場合、それらのエンティティは表示されません。