最初に記号を使用したCSSブレーク・ワード

Question

正しい状況で与えられた間違った場所で長い文字列を壊す傾向があるので、特定の状況では、目の中であまりにも快適なルールを見つけられません。

それはこのような何か生成：

|--- DIV ---| 
|   | 
| English/S | 
| panish | 
|   | 
|-----------| 

代わりの

|--- DIV ---| 
|   | 
| English/ | 
| Spanish | 
|   | 
|-----------| 

それは最初の前にシンボルを通じて言葉を破るしようとしたように、私は私のCSSルールを微調整するための方法はありますが実際の言葉を壊す？もしそうなら、どうすればいいですか？

Answer 1

このような動作を実現する唯一の方法は、ワードブレークを発生させたい位置のマークアップに<wbr>（mdn link）を使用することです。また、うまくsupportedだ

.word-box{ 
 
    width:100px; 
 
    margin:5em; 
 
    border:1px solid #606266; 
 
}

<div id='break-wbr' class='word-box'> 
 
English/<wbr>Spanish 
 
</div>

：

は見てください。

シャイハイフン（­）

.word-box{ 
 
    width:100px; 
 
    margin:5em; 
 
    border:1px solid #606266; 
 
}

<div id='break-shy' class='word-box' lang='en'> 
 
English/&shy;Spanish 
 
</div>

しかしシャイハイフンを使用することの欠点は、それがポイントで可視ハイフンを挿入することであるを使用してであろう位置で破断する別の方法単語の中断の

また、非常によく似た、より詳細な回答hereを見ることもできます。

Answer 2

これを追加してください。 word-break：keep-all;