CSS を使用してブレッドクラム トレイルで左揃えの省略記号を実現するにはどうすればよいですか?

パンくずリストの左揃えテキスト省略記号

多くのアプリケーションでは、階層ナビゲーション パスを表示するためにパンくずリストが使用されます。パスが長すぎて親要素に快適に表示できない場合は、text-overflow: ellipsis を使用してテキストを切り詰めることができます。ただし、この切り詰めは通常、文字列の右側で発生し、重要な情報が見えにくくなる可能性があります。

CSS のみのソリューション

左揃えの省略記号を実現するには、CSS プロパティ方向、テキスト整列、テキストオーバーフローなどを使用できます。たとえば、次のスニペット (提供された jsFiddle から改変) を考えてみましょう。

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

How It Works

• white-space: nowrap;空白文字がテキストを折り返すのを防ぎ、軌跡が 1 行に残るようにします。
• overflow: hidden;省略記号を含むオーバーフローしたテキストを非表示にします。
• text-overflow: ellipsis;テキストを切り詰め、末尾に省略記号を追加します。
• 幅: 170px;トレイルの最大幅を設定します。
• 方向: rtl;テキストを強制的に右から左（逆方向）にレンダリングします。
• text-align: left;指定された幅内でテキストを左に揃えます。

JS ソリューション (提供された回答では利用できません)

明示的に要求されていませんが、JS ソリューション特に RTL と LTR の混合コンテンツを処理する場合に、さらなる柔軟性を提供できます。 1 つのアプローチは、text-overflow-mode プロパティを利用することです。ただし、次のような注意事項と制限があります。

document.querySelectorAll("p").forEach((p) => {
  p.style.textOverflowMode = "clip";
  p.style.direction = "rtl";
  p.style.textAlign = "left";
});

考慮事項

このアプローチは、概要を説明した特定の問題に対処します。質問では、潜在的な欠点に注意することが重要です:

• すべてのブラウザが完全にサポートしているわけではありませんtext-overflow-mode プロパティ。
• 一部のブラウザでは、特に RTL コンテンツと LTR コンテンツを混合する場合に、レンダリングの癖が発生する可能性があります。

これらの制限にもかかわらず、提供されるソリューションは、これらに対処する実用的な方法を提供します。パンくずリストの省略記号を左揃えにすることで、重要な情報に確実にアクセスできるようにします。

以上がCSS を使用してブレッドクラム トレイルで左揃えの省略記号を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。