CSS を使用してテキスト オーバーフローで左揃えの省略記号を実現するにはどうすればよいですか?

左揃えテキスト省略記号コントロール

テキストがコンテナー内でオーバーフローする場合、通常の動作では、省略記号がコンテナー上に表示されます。右の場合、テキストを末尾から切り捨てます。ただし、特定のシナリオでは、重要な情報が確実に表示されるように、省略記号を左側に配置することが望ましい場合があります。

省略記号を左揃えにする方法の 1 つは、CSS を使用することです。次のコード スニペットは、direction、text-align、および text-overflow プロパティを利用しています。

p {
  white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

このソリューションでは、white-space プロパティはテキストの折り返しを防止し、overflow プロパティはオーバーフロー動作を設定します。これにより、コンテンツがコンテナーの幅を超えた場合に切り詰められます。 text-overflow プロパティは、切り捨てに省略記号を使用することを明示的に指定します。

width プロパティは、テキストに使用できる最大スペースを決定します。 direct プロパティはテキストの方向を右から左 (rtl) に設定し、text-align プロパティはテキストの配置を左に設定します。このプロパティの組み合わせにより、テキストが切り詰められたときに省略記号をテキストの左端に表示できます。

この CSS のみのアプローチは Firefox と Chrome では回避策を提供しますが、混合 RTL を扱う場合は制限に直面する可能性があります。そしてLTRコンテンツ。指定された left-overflow-type 値は実験段階にあり、さまざまなシナリオで望ましい動作を提供するにはさらなる開発が必要になる場合があります。

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