ホームページ  >  記事  >  ウェブフロントエンド  >  非表示のオーバーフローを含むスパン内の省略記号を表示するにはどうすればよいですか?

非表示のオーバーフローを含むスパン内の省略記号を表示するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-30 04:27:02163ブラウズ

How to Display Ellipses in a Span with Hidden Overflow?

オーバーフローを非表示にしてコンテンツ内の省略記号を連結する方法

この質問では、開発者は省略記号 ("... ") 非表示のオーバーフローを持つspan要素内。これらは、非表示のオーバーフローを示す CSS コード スニペットを提供しますが、省略記号の表示は提供しません。

提供されたソリューションでは、text-overflow: ellipsis プロパティを利用することを提案しています。要素の内容が幅を超える場合の楕円の表示。修正された CSS コードは次のとおりです。

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

追加の white-space: nowrap プロパティにより、コンテンツが複数行に折り返されなくなり、省略記号が正しく表示されなくなる可能性があります。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。