CSSテキストをオーバーフローさせて非表示にする方法

Web サイトの発展と発展に伴い、テキストの表示とレイアウトがますます必要になります。このプロセスでは、テキスト コンテンツの長さの制御がますます困難になり、コンテナの境界を超える場合もあり、ページ レイアウトが混乱する結果になります。この問題を解決するには、CSS のテキスト オーバーフローの非表示プロパティを使用して、テキストの表示範囲を制御します。この記事では、CSS テキスト オーバーフローの非表示プロパティの詳細な紹介と応用について説明します。

1. CSS テキスト オーバーフローの隠しプロパティ

CSS テキスト オーバーフローの隠しプロパティは、CSS によって提供される非常に便利なプロパティです。コンテナのスコープを超えてコンテナ内のテキスト コンテンツを制御するのに役立ちます。 . 余った部分の対処法。 CSS の text-overflow プロパティを使用して、テキストのオーバーフローを非表示にすることができます。

text-overflow の属性値は次のとおりです。

1. clip: テキストがコンテナの範囲を超える場合、クリップされて表示されません。
2. 省略記号: テキストの末尾に省略記号 (…) を追加します。
3. string: テキストがオーバーフローした場合の表示スタイルとして文字列を指定します。省略記号のスタイルはカスタマイズできます。

2. text-overflow を使用してテキスト オーバーフローを非表示にする

次は、text-overflow 属性を使用してテキスト オーバーフローを非表示にする例です。

HTML コード:

<div>
  <p>
    我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

CSS コード:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

解析:

1. コンテナの幅は 300 ピクセル、高さは 50 ピクセルです。ピクセル。テキスト コンテンツがコンテナの境界を超える場合、テキスト コンテンツは非表示になります。
2. overflow:hidden 属性は、コンテナ内のオーバーフロー部分が切り取られ、ページに表示されないことを指定します。この属性により、テキスト内にスクロール バーが表示されなくなります。
3. white-space:nowrap 属性は、テキストの折り返しを許可しないことを指定します。これは非常に重要で、テキストで行の折り返しが許可されている場合、テキストの表示範囲を制御する方法はありません。
4. text-overflow:ellipsis 属性は、テキストがコンテナの範囲を超える場合にテキストの末尾に省略記号 (...) を表示することを指定します。

実行結果:

図に示すように、テキストの長さがコンテナの範囲を超えており、末尾に省略記号が表示されます。

3. text-overflow を使用して省略記号のスタイルをカスタマイズする

実際の使用では、省略記号のスタイルをカスタマイズする必要がある場合があります。以下は例です。

HTML コード:

<div>
  <p>
  我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

CSS コード:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
}

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

.text::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 2px;
  background-color: #fff;
  color: #999;
}

解析:

1. テキスト クラスのスタイルでは、空白は次のようになります。 nowrap 属性 text-overflow:ellipsis 属性と組み合わせて、テキストの表示方法を指定します。 overflow:hidden は、テキストのオーバーフロー部分が切り取られ、ページに表示されないようにするために使用されます。
2. テキスト クラス スタイルの ::after 擬似要素は、テキストの末尾に接尾辞 '...' を追加し、この接尾辞の位置とスタイルを指定します。

実行結果:

図に示すように、カスタマイズされた省略記号スタイルがテキストの末尾に表示されます。

概要:

この記事の概要と操作例を通じて、text-overflow 属性を使用してテキスト オーバーフローの非表示を実装し、テキストの表示範囲が範囲を超えないようにすることができます。コンテナの境界を定義すると同時に、楕円スタイルをカスタマイズして、ページをより美しく標準化します。この特性をマスターすれば、組版をより洗練されたプロフェッショナルなものにすることができます。

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