CSSはスタイルをラップしません

Web デザインでは、レイアウトの美しさと読みやすさがページのユーザー エクスペリエンスにとって非常に重要です。長いテキストを自動的に折り返すことができない場合、ユーザーの読書体験に影響を及ぼし、ページの美しさに影響を与えるだけでなく、ユーザー エクスペリエンスも低下させます。したがって、Web ページをデザインする場合、CSS スタイルを正しく使用して自動ワードラップを実現する方法は非常に重要なスキルです。

CSS には、テキストを折り返す方法を制御できる複数のプロパティがあります。その中で最も一般的なのは white-space 属性です。この属性は、要素がスペースと改行を保持するかどうか、およびテキスト内のスペースと改行を処理する方法を制御します。

空白属性には次の 3 つの値があります:

1. normal: デフォルト値。 CSS または HTML を使用してテキスト内の改行を行わない限り、標準の改行ルールが適用され、連続するスペースや改行は 1 つのスペースまたは改行に圧縮されます。
2. pre: テキスト内のスペースと改行は保持され、テキストはそのまま表示されます。
3. nowrap: スペースまたは改行文字が見つかってもテキストは折り返されませんが、引き続き同じ行に表示されます。

以下では、3 つの非行折り返しの例を実装して、CSS の white-space 属性を使用して非行折り返しスタイルを実装する方法を示します。

例 1: テキストを強制的に同じ行に表示する

この例では、テキストを改行せずに 1 行に表示する方法を示します。これを実現するには、white-space プロパティの nowrap 値を使用します。具体的な実装方法は次のとおりです。

.nowrap {
  white-space: nowrap;
}

このスタイルは、すべての要素のテキスト コンテンツを強制的に同じ行に表示し、スペースまたは改行文字が見つかったときに折り返されません。以下の例を見てみましょう:

<div class="nowrap">
  这是一个很长的文本，我们在这里使它不进行换行处理。
</div>

ここのテキストは、スペースまたは改行文字に遭遇しても折り返されず、常に同じ行に表示されます。

例 2: コンテナを超えるテキストの部分を非表示にする

この例では、幅制限に達したときにコンテナを超えるテキストの部分を非表示にする方法を示します。 。これを実現するには、overflow プロパティと text-overflow プロパティを使用します。具体的な実装方法は以下の通りです。

.overflow {
  width: 300px; /* 给容器指定宽度，超出部分进行隐藏 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分进行隐藏 */
  text-overflow: ellipsis; /* 超出部分使用“...”进行省略 */
}

このスタイルは要素の幅を制限し、余分な部分を非表示にし、「...」を使用して省略します。例を見てみましょう:

<div class="overflow">
  这是一个很长的文本，我们将它放在容器中限制宽度，并使超出部分进行隐藏，使用“...”进行省略。
</div>

ここのテキストはコンテナの外では省略され、「...」に置き換えられます。

例 3: 単語が分割されない

この例では、単語が別の行に分割されることを回避する方法を示します。これを実現するには、white-space プロパティの pre 値を使用します。具体的な実装方法は次のとおりです。

.no-split {
  white-space: pre;
}

このスタイルは、テキスト内の単語の元の形式を保持します。つまり、単語が別の行に分割されません。以下の例を見てみましょう:

<div class="no-split">
  这是一个带有多个空格的文本，我们将使单词不被分割在不同的行中。
</div>

ここのスペースはテキスト内の形式に従って保持され、単語は別の行に分割されません。

要約すると、上記の例は、CSS スタイルを使用してテキストの折り返しを制御する方法を示しています。 Web ページをデザインするときに、これらの属性を正確に使用すると、Web ページの美しさとユーザー エクスペリエンスを向上させることができます。

以上がCSSはスタイルをラップしませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。