CSSで改行なしのスタイルを設定する方法

css (Cascading Style Sheets) は、Web ページ (HTML ドキュメント) がどのようにレンダリングされるかを記述するために使用されるスタイル言語です。スタイルを設定することで、HTML ドキュメント内の色、フォント、サイズ、位置などの要素の外観とレイアウトを制御できます。

Web ページの特定の場所で改行を避け、同じ行に表示させたい場合があります。このとき、CSSを使用して改行を行わないように設定できます。

CSS で行以外の折り返しを設定する方法はたくさんありますが、ここではよく使われる 2 つの方法を紹介します。

1. white-space 属性を使用する

white-space 属性は、要素内の空白 (スペース、改行など) の処理方法を設定するために使用されます。 。デフォルトでは、空白属性の値は通常です。つまり、連続する空白文字がある場合、それらは 1 つのスペースにマージされ、改行文字が出現すると、その行は自動的に折り返されます。

要素内のコンテンツが折り返されないようにするには、空白属性の値を nowrap に設定します。サンプル コードは次のとおりです。

<style>
    .nowrap {
        white-space: nowrap;
    }
</style>
<div class="nowrap">这是一段不换行的文本，当文本过长时不会自动换行。</div>

2. CSS 擬似要素::before および ::after を使用します

CSS 擬似要素::before および ::after を使用できます。要素の前に置くか、後でコンテンツを挿入します。この機能を使用すると、コンテンツが自動的に折り返されないように空白の要素を挿入できます。

具体的には、::before または ::after の content 属性を空の文字列に設定し、display 属性を inline-block または inline に設定することで、空のインライン ブロック要素を挿入できます。改行なしの効果を実現します。サンプル コードは次のとおりです。

<style>
    .nowrap {
        white-space: nowrap;
    }
    .no-wrap::before,
    .no-wrap::after {
        content: "";
        display: inline-block;
    }
</style>
<div class="no-wrap">这是一段不换行的文本，当文本过长时不会自动换行。</div>

上記は、改行を設定しないためによく使用される 2 つの CSS メソッドです。なお、行折り返しなしの効果は現在の要素内でのみ有効となるため、Webページ全体の自動折り返しを防止したい場合はbody要素に設定を適用する必要があります。

以上がCSSで改行なしのスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。