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

オーバーフローするスパンでの省略記号の表示

オーバーフローが非表示になっているスパンでドット ("...") を表示するには、 text-overflow: 省略記号プロパティ。あふれたテキストを切り捨て、代わりに省略記号を表示します。

実装方法は次のとおりです:

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

このスニペット内:

• display: inline-block
• width: 180px は、スパンの幅を 180 ピクセルに設定します。
• white-space: nowrap は、テキストの折り返しを防ぎます。
• overflow: hidden ! important は、コンテンツがスパンの幅をオーバーフローしたときにコンテンツが非表示になるようにします。
• text-overflow: ellipsis はテキストを切り詰め、コンテンツがオーバーフローしたときに省略記号を表示します。 .

これらのプロパティを組み合わせることにより、スパン内に省略記号を表示して、表示されていないコンテンツがさらにあることを示すことができます。

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