css - CSS を使用して特定の単語に Word Break を使用する

Question

css を使用して特定の単語を分割しようとしています。

単語は「セールス/テレマーケティング」で、「/テレ」の部分の後に単語を分割しようとしています. <br>段落タグのレイアウトに影響を与える可能性があるため、使用を避けようとしています。

CSSを使用してそれを破る方法はありますか?

Answer 1

あなたが避けたいと言ったのは知っています<br>が、そこには<wbr>..

jsfiddle デモ

使用例:

<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>

のサイズを変更するpと、単語はteleの後で改行されます。

MDN を参照

残念ながら、<wbr>IE10 ではサポートされていないため、 のサポートは限られています。

---

ランダムなCSSの代替案を考えただけです..

jsFiddle デモ

HTML

<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>

CSS

span {
    margin-right:-4px;
}

基本的に、teleの後にスペースを含めるだけなので、新しい行に分割されます.. Teleという単語を選択すると、スペースを削除できます.. 理想的ではありませんが、それでも機能します.

Answer 2

CSS で単語の分割点を指定することはできません (適切な方法の信頼性の低いエミュレーションにすぎない不自然な方法を除きます)。代わりに、方法がわかっている場合は直接入力するか、参照を使用して、ハイフネーションのヒント、ソフト ハイフン、U+00AD を含めます­。

sales/tele­marketing

必要に応じて、同じ単語に他のハイフネーション ヒントを追加できます。<wbr>また、 afterを追加し/て、許可された直接ブレーク ポイントを指定できます (文字列が分割されている場合、ハイフンは表示されません)。