改行なしのCSS

Web デザインにおいて、CSS (Cascading Style Sheets) は不可欠な部分です。 CSS は、Web ページのレイアウト、スタイル、動作を制御できます。基本的なスタイル設定の 1 つは、テキストの折り返し方法です。デフォルトでは、テキストが行末に達すると、ブラウザは自動的に次の行に折り返されます。ただし、場合によっては改行なしでテキストを表示する必要があるため、この記事では CSS を使用して改行の効果を実現する方法を紹介します。

1. ホワイトスペース属性

CSS にはホワイトスペース属性があり、スペースや改行など、要素内のテキストがどのように処理されるかを決定します。デフォルトでは、空白属性の値は通常です。つまり、スペースまたは改行文字が出現すると行が自動的に折り返されます。ただし、このプロパティの値を設定することで、行の折り返しを行わない効果を実現できます。

1.white-space:normal

デフォルトでは、white-space 属性値は通常です。これは、要素内のテキストにスペース、タブ、改行などが含まれることを意味します。マークを付けるときに行を折り返す。行を折り返さない効果を実現したい場合は、以下に示すように、属性値を nowrap に設定する必要があります。

p {
  white-space: nowrap;
}

このコードの意味は、p 要素内のテキストを折り返さないように設定することです。 。

2. white-space:pre

nowrap に加えて、white-space 属性には pre などの他のオプションの値があります。ホワイトスペース属性の値が pre の場合、ブラウザはスペース、タブ、改行などを含む要素内のテキストを事前にフォーマットされた方法で表示します。この属性値を適用する場合は、次のようにコードを変更するだけです:

p {
  white-space: pre;
}

3. white-space:pre-wrap

もう 1 つの値は pre です。 -wrap。自然な改行を維持しながら、事前にフォーマットされたスペースや改行を強制できます。たとえば、次のコードは各単語の間に 2 つのスペースを追加します。

p {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-spacing: 2px;
}

pre-wrap 属性を使用する場合、word-wrap 属性と word-spacing 属性を設定して、テキストの表示をさらに制御することもできます。 . .

2. text-overflow 属性

white-space 属性に加えて、改行をなくすために一般的に使用される CSS 属性として text-overflow があります。この属性は、インライン要素またはブロック要素内の長すぎるテキストを切り捨て、省略記号で表すために使用され、ある程度の行折り返しを行わない効果を実現します。

text-overflow 属性には 3 つのオプションの値があります:

1. ellipsis: 省略記号
2. clip: テキストの切り捨て
3. string: カスタム文字列

次のコードは、text-overflow 属性を使用して長すぎるテキストを切り詰め、省略記号で表示する方法を示しています。

p {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

この例では、まず要素の Set を切り詰めます。幅を 150 ピクセルに設定し、テキストが折り返されないように、white-space プロパティを nowrap に設定します。次に、オーバーフロー属性を hidden に設定して、要素の境界を超えたテキストの部分が非表示になるようにします。最後に、text-overflow プロパティを ellipsis に設定して、切り詰められたテキストが省略記号として表示されるようにします。

3. Word-break 属性

word-break 属性は、テキストの折り返し方法を制御するために使用されます。これは英語などの単語がスペースで区切られているテキストにのみ有効であり、中国語などのスペースのないテキストには機能しないことに注意してください。

word-break 属性には 3 つのオプションの値があります。

1. normal: デフォルトの改行ルールを使用します。つまり、単語は 2 行以上に分割されません。
2. break-all: 単語内のテキストを分割します。
3. keep-all: 主要な文字 (漢字、カタカナ、タニ音節など) の間のみ改行します。

次のコードは、ワードブレークを使用してテキストの折り返し方法を制御する方法を示しています。

p {
  width: 100px;
  word-break: break-all;
}

この例では、p 要素の幅を 100 ピクセルに設定し、単語内のテキストを分割するには、word-break プロパティを Break-all に設定します。

まとめ

上記は、この記事で紹介する、空白属性、テキストオーバーフロー属性、ワードブレーク属性を含むCSSの非行折り返し方法です。実際の Web デザインでは、特定のニーズに応じてこれらの属性を柔軟に使用して、ページ スタイルやレイアウト効果を実現できます。

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