CSSで非表示のオーバーフローを使用してスパンに省略記号を表示するにはどうすればよいですか?

非表示のオーバーフローを使用してスパンに省略記号を表示する

CSS では、要素のコンテンツが境界をオーバーフローしたときに何が起こるかは、オーバーフロー プロパティによって決まります。指定されたシナリオでは、span 要素の CSS はオーバーフローしたコンテンツを非表示にします。この結果、コード スニペットに見られるように、コンテンツが切り取られます。

この問題に対処するには、テキストのオーバーフローの動作を制御する text-overflow プロパティを利用できます。 text-overflow を省略記号に設定すると、オーバーフローしたテキストを省略記号 (...) に置き換えるように指定できます。これにより、スパン内のテキストの一部を表示しながら、さらにテキストがあることを示すことができます。

望ましい結果を達成するために CSS を変更する方法は次のとおりです。

<code class="css">span {
  display: inline-block;
  width: 180px;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

これ更新された CSS では、span 要素内のテキストが幅 180 ピクセルまで表示されます。残りのテキストは省略記号に置き換えられます。

以上がCSSで非表示のオーバーフローを使用してスパンに省略記号を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。