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

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

パスのリストまたはテキスト値が範囲を超えるシナリオが発生する可能性があります。表示幅。これを解決するには、text-overflow プロパティを実装してテキストを切り詰めることをお勧めします。ただし、重要な情報がテキストの最後にあるとします。その場合、省略記号を左側に表示して、右端のコンテンツが表示されたままにすることをお勧めします。

この問題の解決策は、提供されている JavaScript フィドルで見つけることができます。ここでは、方向、text-align、および text-overflow プロパティの組み合わせが使用されます。 MDN ドキュメントによると、将来的には、overflow-type を使用して左側に省略記号の位置を指定するオプションが追加される可能性があることに注意してください。ただし、この機能はまだ実験的であると考えられています。

1. Direction: このプロパティは、direction:rtl; を使用してテキストの方向を右から左 (RTL) に調整します。
2. Text-align: text-align プロパティは、親要素内のテキストをその親要素に合わせて配置します。 left.
3. Text-overflow: text-overflow プロパティは省略記号に設定されます。これにより、テキストが効果的に切り詰められ、テキストが要素の幅を超える場合には省略記号が表示されます。

詳細な説明のために、提供されている JS フィドルを次に示します。

JavaScriptフィドル

CSS:

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

HTML:

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

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