<p>ハイフンが不必要に表示されないように CSS でハイフンまたはソフト ハイフンを使用することはできますか? </p> <p>私の目標は、元のテキストをできるだけ保持し、コンテナの幅に収まらないほど長すぎるため、絶対に重要でない限り単語を分割することです。 </p> <h3>私の具体的なケース</h3> <p>「こんにちは、スーパーマン」というテキストを次のようにレンダリングしたいと思います: </p> <p>「スー​​パーマン」という単語が長すぎてコンテナに収まらない場合は、次のようにハイフンで区切ります。</p> <pre class="brush:php;toolbar:false;">こんにちは、スーパー- 男</pre> <p>ただし、「Superman」という単語がコンテナに収まる場合は、ハイフンなしでレンダリングする必要があります</p> <pre class="brush:php;toolbar:false;">こんにちは スーパーマン</pre> <p>上記の状況が可能である場合 (「Superman」にハイフンがなくてもよい)、<em>不必要なハイフン</em> の追加は許容されません: </p> <pre class="brush:php;toolbar:false;">こんにちは、スーパー- 男</pre> <p>必要に応じて HTML を変更できます。意味のある方法でハイフンを挿入できます (各ハイフンの間に 3 文字以上の文字がある限り。「Superma-n」は決して良くありません)</p> <h3>試したこと</h3> <p>ソフトハイフンが解決策だと思います。そこで私は次のようにしました:<code>Hi Super­man</code></p> <p>しかし、これが上記の「不要なハイフン」という容認できない状況につながることがわかりました。 </p> <h3>失敗したスニペットを表示: </h3> <p> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { マージン左: 30px; } ディビジョン { 境界線: 1 ピクセルの黒の実線。 } 。広い { 境界線: 1 ピクセルの青の実線。 幅: 500ピクセル; } 。狭い { 境界線: 1 ピクセルの赤の実線。 幅: 360ピクセル; } h2 { フォントファミリー: 'Courier New'; フォントの太さ: 400; フォントサイズ: 87px; } コード{ 背景色: #eee; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><p> <code>Super&amp;shy;man</code> は、非常に狭いコンテナで適切に表示されます。 「スーパーマン」という完全な単語は当てはまりません</p> <p> <div class="narrow"><h2>こんにちはスーパー&内気な男</h2></div> <p>しかし、この場合、「Superman」という単語はハイフンなしで 2 行目に収まります。しかし、CSS はとにかくハイフンを追加することを決定します。私の場合は受け入れられません! ここでも、前の例と同じコードを使用します。 <code>超恥ずかしがり屋</code></p> <div class="wide"><h2>こんにちは、超恥ずかしがり屋さん</h2></div> <p>このように、「スーパーマン」の前に単語区切りタグを追加してみました。<code>Hi <wbr> Super&amp;shy;man</code> ですが、役に立ちません</p> ; <p> </p> <div class="wide"><h2>こんにちは <wbr>スーパー&シャイ;マン</h2></div></code></pre> </p> <p>CSS だけを使用して上記の例を解決できますか? (別の <code>word-break</code> 属性を試しましたが成功しませんでした)</p> <p><strong>私の推測では</strong> CSS の性質上、単純な HTML と CSS だけを使用してこの問題を解決することは不可能です。 CSS はテキストを 1 行ずつ解析するだけで、単語がテキストの次の行に「よりよく適合する」かどうかを知ることはできないと仮定しています。ハイフンが見つかった場合は、現在のテキスト行に最大文字数を収めようとします。 </p> <p>HTML と CSS のみを使用するか、まったく使用せずにこの問題を解決したいと考えています。 </p> <p>ベスト:</p>

<li><p>テキスト解析に JavaScript を使用しません。 </p> </li> <li><p>div の幅やテキストにハイフンが必要かどうかに基づいて、div ごとに異なる CSS プロパティを設定する必要はありません。 </p> </li> <li><p>テキストの周囲に折り返しを追加したくない</p> </li> <li><p>自動ハイフンを使用しないと、「Superma-n」のようなばかげたハイフンが使用されます (ただし、いざというときには、各ハイフンの間に 3 文字があれば自動ハイフンを使用できます。たとえば、「Sup-」エルマン" )</p> </li> </ul><