CSSでテキストが折り返されないようにする方法

Web 開発では、テキストの段落全体をセルまたはコンテナーに表示する必要があるが、テキストが長すぎるため、改行が発生して外観に影響を与えることがよくあります。このとき、CSS スタイル コントロールを使用すると、テキストの折り返しを防ぎ、より美しいレイアウトを実現できます。

以下では、CSS でテキストを折り返さないように制御するいくつかの方法を紹介します。

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

CSS では、ホワイトスペース属性はテキストのレイアウトを制御するために使用されます。デフォルトでは、空白属性の値は「通常」です。つまり、スペース、改行、タブなどの空白文字に遭遇すると、自動的に折り返され、前方にタイプセットされなくなります。テキストが折り返されないように「nowrap」に設定するだけです。

例は次のとおりです:

.container {
  white-space: nowrap;
}

上記のコードでは、.container はスタイル制御が必要なコンテナを表し、white-space## を設定します。 # から nowrap にすると、テキストが折り返されなくなります。

2. オーバーフロー属性

テキストの折り返しを制御するもう 1 つの方法は、オーバーフロー属性を使用することです。コンテナ内のコンテンツがコンテナのスコープを超える場合に、スクロール バーを表示または非表示にするには、この属性を使用します。ここで、overflow の値を「hidden」に設定すると、コンテナのスコープを超えたトリビュタリのテキストを非表示にし、テキストが折り返されなくなります。

例は次のとおりです。

.container {
  overflow: hidden;
}

上記のコードでは、

.container はスタイル コントロールのコンテナを表し、overflow を # に設定します。 ##hidden テキストの折り返しを防止します。 3. text-overflow 属性

テキストが長すぎて非表示にできない場合があるため、テキスト内容の一部を表示し、非表示部分を省略記号で示す必要があります。この場合、text-overflow プロパティを使用できます。この属性を使用すると、テキストが特定の長さを超えたときに省略記号が表示され、テキストは折り返されません。

例は次のとおりです。

.container {
  overflow: hidden;   /* 必须要设置overflow属性值为“hidden” */
  white-space: nowrap;  /* 禁止文本换行 */
  text-overflow: ellipsis;  /* 超出容器大小的文本以省略号表示 */
}

上記のコードでは、

.container

はスタイル コントロールのコンテナを表し、overflow を # に設定します。 ##hidden# テキストが折り返されて表示されないようにするには、##、white-space を nowrap に、text-overflow を ellipsis に設定します。楕円。 要約: 上記では、white-space 属性、overflow 属性、text-overflow 属性を使用して、テキストを折り返さないように制御する 3 つの方法を紹介しました。どの方法を使用するかは、特定のニーズによって異なります。開発プロセスでは、美しさと読みやすさのために、これらの基本的な CSS スタイル制御スキルを習得する必要があります。

以上がCSSでテキストが折り返されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。