<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 Superman</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&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&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><
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 3 には、指定された
langプロパティに基づいてハイフンを設定する「hyphens」プロパティが含まれています。ただし、これは単なる 作業草案 であるため、サポートはまだ少しです。に設定できます
なし。ハイフンは表示されません。-
手動で行うため、特殊文字 - ­
auto、ローカライズに基づいて必要な場所にハイフンを自動的に追加します。 -
Firefox、Edge、さらには IE でも問題なく動作しますが、主な問題は、Webkit が「auto」値をサポートしていないことです。 Mac と Android を除き、これが受け入れられる唯一の値です。はい、これは奇妙なまたはが宣言されている単語のみが分割されます。バグ です。
これは一例です。Windows/Linux を実行している場合は、Firefox と Chrome の違いを必ず確認してください。work-break:break-all
で hyphens:auto を使用することです。これにより、サポートされているブラウザではテキストが hyphens:auto を使用して接続されます。 WebKit では文字が連結されており、ハイフンで囲まれていません。長い単語の周囲には
display: inline-blockを含むコンテナを使用します。