How to Achieve Left-Sided Text Overflow Ellipsis in Safari?

Left-Sided Text Overflow Ellipsis

When working with a list of lengthy paths, it can be challenging to display them fully while ensuring that important information on the right remains visible. To address this, you may wish to implement a left-sided text overflow ellipsis, which would truncate the beginning of the path while retaining its end.

Unlike browsers like Firefox and Chrome, Safari currently lacks support for this functionality using CSS alone. However, a combination of CSS properties can be used as a workaround.

CSS Solution:

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

Explanation:

• white-space: nowrap prevents the text from wrapping onto multiple lines.
• overflow: hidden hides the overflowing portion of the text.
• text-overflow: ellipsis triggers the addition of an ellipsis when the text exceeds the available width.
• width specifies the maximum width of the path container.
• direction: rtl forces the text direction to right-to-left.
• text-align: left aligns the text to the left of the container, effectively placing the ellipsis on the left.

Example:

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

This CSS workaround achieves the desired effect of displaying a left-sided text overflow ellipsis, ensuring that critical information on the right remains visible, even for lengthy paths.

The above is the detailed content of How to Achieve Left-Sided Text Overflow Ellipsis in Safari?. For more information, please follow other related articles on the PHP Chinese website!