CSS テキスト クリッピング プロパティの探索: text-overflow と overflow

CSS テキスト クリッピング プロパティの探索: text-overflow と overflow

はじめに:
Web 開発では、テキストをクリッピングする必要がある状況によく遭遇します。 。 CSS には、text-overflow プロパティや overflow プロパティなど、テキストをクリップする複数の方法が用意されています。この記事では、両方のプロパティを検討し、具体的なコード例を示します。

1. Text-overflow 属性

1. text-overflow: Clip
   テキストがコンテナの境界を越える場合、テキストは自動的にクリップされ、外側には表示されません。コンテナ。

例:

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。
</div>

2. text-overflow: ellipsis
   テキストがコンテナの境界を越える場合、切り取られた部分を示すために楕円が使用されます。

例:

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被用省略号表示。
</div>

2. オーバーフロー属性

1. オーバーフロー: 非表示
   コンテンツがコンテナの境界を越える場合、コンテンツは切り取られます。コンテナの外に展示します。

例:

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。</p>
</div>

2. overflow:scroll
   コンテンツがコンテナの境界を越える場合、クロップされた部分を表示するためにスクロール バーが追加されます。スクロール バーを使用してすべてを表示します。

例:

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会增加滚动条。</p>
</div>

結論:
text-overflow 属性は、テキストがコンテナからオーバーフローした場合のトリミング方法を制御するために使用されます。クリップはオーバーフロー部分を直接トリミングできます。と ellipsis は ellipses を使用し、オーバーフロー部分を示します。 overflow 属性はコンテナのオーバーフロー動作を制御でき、hidden はオーバーフロー部分を切り取ることができ、scroll はコンテンツを表示するスクロール バーを追加します。実際のプロジェクトでは、ニーズに応じて適切な属性を選択して、テキストのトリミング効果を実現できます。

テキスト オーバーフロー プロパティとオーバーフロー プロパティはどちらもテキスト トリミング機能を提供しますが、適用できるシナリオは異なります。 text-overflow は 1 行のテキストを切り取るのに適しており、overflow は複数行のテキストを切り取るのに適しています。

この記事が、テキスト オーバーフローとオーバーフロー プロパティの理解と適用に役立つことを願っています。

以上がCSS テキスト クリッピング プロパティの探索: text-overflow と overflowの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。