如何在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;
}

說明：

• white-space：nowraphite到多個行。
• overflow：隱藏隱藏文字溢位部分。
• text-overflow：省略號在文字超出可用寬度時觸發添加省略號。
• width 指定路徑容器的最大寬度。
• direction：rtl 強製文字方向從右到左。
• 文字對齊：左對齊文字到容器的左側，有效地將省略號放在左側。

範例：

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

此CSS 解決方法實現了顯示左側文字溢出的預期效果省略號，確保即使對於很長的路徑，右側的關鍵資訊仍然可見。

以上是如何在Safari中實現左側文字溢出省略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！