How Can I Display Text Overflow Ellipsis on the Left Side?

Text Overflow Ellipsis on Left Side:

You may encounter a scenario where you have a list of paths or any text values that exceed the display width. To resolve this, you might want to implement text-overflow property to truncate the text. However, suppose the critical information is located at the end of the text. In that case, you'd prefer the ellipsis to appear on the left side, ensuring the rightmost content remains visible.

The solution to this problem can be found in the provided JavaScript fiddle. Here, a combination of direction, text-align, and text-overflow properties is employed. It's worth noting that according to MDN documentation, there may be a future option to specify ellipsis positioning on the left using overflow-type. However, this feature is still considered experimental.

1. Direction: This property adjusts the text direction to right-to-left (RTL) using direction:rtl;.
2. Text-align: The text-align property aligns the text within its parent element to the left.
3. Text-overflow: The text-overflow property is set to ellipsis. This effectively truncates the text and displays an ellipsis if the text extends beyond the element's width.

Here's the provided JS fiddle for further illustration:

JavaScript Fiddle

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>

The above is the detailed content of How Can I Display Text Overflow Ellipsis on the Left Side?. For more information, please follow other related articles on the PHP Chinese website!