非改行スペースを使用せずにHTMLでカンマの後に改行を強制する方法-CSSチュートリアル-php.cn

非改行スペースを使用せずにHTMLでカンマの後に改行を強制する方法

Patricia Arquette

リリース： 2024-10-27 02:26:02

オリジナル

301 人が閲覧しました

How to Force Line Breaks After Commas in HTML Without Using Non-Breaking Spaces?

HTML で改行に影響を与える方法

HTML では、通常、改行はスペースまたはその他の指定された改行によって決まります。ただし、特定の位置、特にカンマの後の改行を優先したい場合があります。この記事では、非改行スペースに頼らずにこれを実現する手法について説明します。

要素

を使用して検討された元のアプローチ。テキストの断片をラップする要素。ただし、この手法は効果がないことが判明しました。

text-wrap:回避 CSS プロパティ

CSS3 の text-wrap:回避動作は有望に見えますが、ブラウザの互換性を考慮する必要がある場合があります。 .

<code class="css">span.avoidwrap { display:inline-block; }</code>

ログイン後にコピー

display:inline-block プロパティの使用

<code class="html"><span class="avoidwrap">Honey Nut Cheerios,</span>
<span class="avoidwrap">Wheat Chex,</span>
<span class="avoidwrap">Grape-Nuts,</span></code>

ログイン後にコピー

display:inline-block プロパティはに適用できます。

この変更された要素でテキストの断片をまとめて保持します。要素を含めると、全体を囲む単一のブロックとして扱われます。ブロックをラップした後でのみ、必要に応じて内部のテキストが小さなフラグメントに分割されます。このアプローチにより、非改行スペースに頼ることなく、望ましい外観を維持しながら改行をより細かく制御できます。全体の幅を無条件に変更します。

以上が非改行スペースを使用せずにHTMLでカンマの後に改行を強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。