ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSの改行なしの省略記号とは何ですか?
CSSの改行なしの省略記号とは何ですか?
- PHPzオリジナル
- 2023-04-24 09:08:415214ブラウズ
CSS 省略記号は、長いテキストを 1 行に表示し、最後に省略記号を追加する非常に実用的な効果です。これは、レイアウトの美化とユーザーエクスペリエンスの向上に非常に良い効果をもたらします。
CSS では、通常、省略記号の効果を実現するためにテキスト オーバーフローを使用します。しかし、実際に申請を行ってみると、1行に表示される文章が長すぎると、レイアウトが乱れたり、期待通りにならない事態が発生したりすることがあります。
テキストが長すぎてレイアウトの問題が発生することを望まない場合は、CSS の nowrap 属性を使用してテキストの折り返しを禁止できます。この属性はあまり使用されませんが、実際の開発では非常に実用的な結果を達成できます。
次に、nowrap属性の使い方を詳しく紹介します。
ステップ 1: テキストの折り返しをオフにする
nowrap 属性を使用する前に、テキストの折り返しをオフにする必要があります。 CSS テキスト レイアウトでは、テキストの折り返しをオフにする 3 つの方法があります。
- 空白属性を使用する
空白属性を使用して、要素の内容 テキストを折り返す方法。次の属性値があります。
1) 通常: デフォルト値。つまり、空白文字の特別な処理や単語内の改行の制限はありません。
2) pre: 空白文字を保持すると、テキストはソース コード内のその位置で折り返されます。
3) nowrap: 行の折り返しはありません。
要素内でテキストが折り返されないようにするには、空白を nowrap に設定する必要があります。
サンプル コード:
p {
white-space: nowrap;
}
- word-break 属性の使用
word-break 属性を使用して、単語の分割方法を制御できます。次の属性値があります:
1) 通常: デフォルト値、つまりデフォルトの行折り返しルールを使用します。
2) keep-all: 単語の分割を禁止します。
3) Break-all: 単語内での改行を許可します。
単語をそのまま保持するには、word-break 属性を keep-all に設定する必要があります。
サンプルコード:
p {
word-break: keep-all;
}
- オーバーフロー属性の使用
要素の内容がコンテナのスコープを超える場合、オーバーフローを制御できます。オーバーフロー属性 Way を介してコンテンツの情報を取得します。次の属性値があります:
1)visible: デフォルト値。コンテナの外にコンテンツを表示できます。
2) hidden: コンテナの外側のコンテンツを非表示にします。
3) auto: コンテンツを自動的にスクロールして表示します。
4) スクロール: コンテナの範囲を超えたコンテンツを表示できるように、スクロール バーを強制的に表示します。
コンテナの外側のコンテンツを非表示にするには、オーバーフロー属性を非表示に設定する必要があります。
サンプル コード:
div {
overflow: hidden;
}
ステップ 2: 省略記号の追加
次のステップでは、省略記号を追加します。 text-overflow 属性を使用して ellipsis に設定する必要があります。これにより、テキストの末尾に省略記号が追加されます。
サンプルコード:
p {
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
これでエフェクトは完了です。 nowrap 属性を使用すると、テキスト コンテンツは自動的に折り返されず、1 行で表示されます。テキストがコンテナの範囲を超える場合、非表示部分は省略記号に置き換えられます。
nowrap 属性を使用すると、テキストの内容が非常に狭くなり、フォントが小さくなり、閲覧しにくくなることに注意してください。したがって、nowrap 属性を使用する場合は、フォント サイズを適切に調整する必要があります。
結論
CSS の省略記号効果は、nowrap 属性を使用することで 1 行で表示でき、最後に省略記号が追加されます。この効果は、表示時に良好なレイアウト効果を維持する必要がある長いテキストに適しています。 nowrap 属性を使用する場合、ユーザー エクスペリエンスへの影響を避けるためにフォント サイズを適切に調整する必要があることに注意してください。
以上がCSSの改行なしの省略記号とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。