CSSテキストのオーバーフローを解決する方法

Web デザインでは、要素の境界を超えるテキストに遭遇することがよくあります。テキストのオーバーフローはデザイン レイアウトを破壊し、ユーザー エクスペリエンスに影響を与える可能性がありますが、優れた CSS 知識がこの問題の解決に役立ちます。

実際には、テキストの処理方法を制御する方法がいくつかあります。以下にそれらを紹介し、実践的な例を示します。

1. Ellipsis

Ellipsis は、最も一般的に使用されるテキスト切り捨て処理方法であり、単一行または複数行のテキストを切り捨てるために使用できます。

単一行の省略記号

単一行のテキストが混雑している状況では、テキスト コンテナーの幅と省略記号のスタイルをテキストを超えて設定することが解決策になります。

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

コードでは、空白属性が nowrap に設定されており、余分なスペースを作成せずにテキストが 1 行に表示されます。 text-overflow: ellipsis を使用すると、コンテナが小さい場合に、コンテナの幅を超えるコンテナ内の文字を非表示にして省略記号に置き換えることができます。

複数行省略

複数行のテキストが境界を越える場合、行数を設定して行数の範囲内でテキストを表示することができます。次の CSS プロパティを適用できます。

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

このコードでは、display: -webkit-box および -webkit-box-orient:vertical を使用して、テキストコンテンツ 垂直フレックスボックスとして設定し、-webkit-line-clamp プロパティを設定してテキストを 3 行に制限します。最後に、overflow: hidden を使用してオーバーフロー テキストを制御します。

2. テキストのスクロール

テキストのオーバーフローに対するもう 1 つの解決策は、テキスト コンテナ内でテキストをスクロールさせることです。このメソッドは、テキスト コンテナ内のテキストを事前定義された速度で自動的にスクロールできるため、余分なテキストを適切に処理できます。対応する CSS プロパティは次のとおりです。

.text-scroll {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

この設定では、white-space: nowrap および overflow: hidden によりテキストが 1 行に制限され、任意のテキストが制限されます。超えて。 anime はテキストを左にスクロールする marquee アニメーションを定義し、infinite 属性はテキストを無限にスクロールさせます。

3. スペースとハイフンの処理

テキストのあふれを解決するもう 1 つの方法は、スペースとハイフンを処理することです。これにより、テキストが切り詰められることなく、完全にユーザーに表示されるようになります。対応する CSS プロパティは次のとおりです。

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

コード内word-wrap:break-word テキストを超える単語または単一の文字を処理し、単語または文字全体がテキスト上に表示されるようにします。次の行、そしてそれは破壊されません。 white-space: pre-wrap はスペースとハイフンを処理し、それらの配置によってテキストの内容が損なわれないようにします。さらに、word-break:break-all プロパティと overflow-wrap:break-word プロパティにより、テキストがあふれてもテキスト領域のデザイン レイアウトが中断されません。

概要

上記の CSS テクニックを通じて、テキスト オーバーフローの問題を制御および解決し、Web サイトやアプリケーションによりスムーズで優れたユーザー エクスペリエンスを提供できます。独自のプロジェクトでこれらの CSS プロパティを試してみると、間違いなくユーザーのエクスペリエンスが向上します。

以上がCSSテキストのオーバーフローを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。