Safariで左側のテキストオーバーフロー省略記号を実現するにはどうすればよいですか?

左側のテキスト オーバーフロー省略記号

長いパスのリストを操作する場合、パスを完全に表示しながら、右側の重要な情報は表示されたままになります。これに対処するには、左側のテキスト オーバーフロー省略記号を実装するとよいでしょう。これにより、パスの末尾は保持しながら先頭が切り詰められます。

Firefox や Chrome などのブラウザとは異なり、Safari は現在この機能をサポートしていません。 CSSのみを使用します。ただし、CSS プロパティの組み合わせを回避策として使用できます。

CSS 解決策:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

説明:

• 空白: nowrap はテキストが複数に折り返されるのを防ぎます行。
• overflow: hidden は、テキストのオーバーフロー部分を非表示にします。
• text-overflow: ellipsis は、テキストが利用可能な幅を超える場合に省略記号の追加をトリガーします。
• width はパスコンテナの最大幅を指定します。
• direction: rtl はテキストの方向を強制します。右から左へ。
• text-align: テキストをコンテナの左側に左揃えし、実質的に省略記号を左側に配置します。

例:

<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth > sixth > seventh > eighth > ninth</p>

この CSS 回避策は、左側のテキスト オーバーフローを表示するという望ましい効果を実現します。省略記号を使用すると、長いパスであっても右側の重要な情報が表示されたままになります。

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