Left align text but prefix with ... if too long on left

Question

We need to display the hierarchy of some data to the user. For example,

"Building Name / Floor Number / Section Name / Room Number / Desk Number"

The end of the hierarchy is most important. So that must be displayed, but the front bit, can be truncated. When the data first into the area we display without truncation, all is good.

But if we need to truncate, we need to truncate the front text, and apply a '...'. So, for example, we want to see:

'...tion Name / Room Number / Desk Number'

Is this possible with CSS? At the moment, we're going to try see the char count, but I'm aware that a w and and i use different widths, and assuming a char count > x isn't a good idea at all.

Is this possible with CSS or javascript?

Have you saw this answer? https://stackoverflow.com/questions/12761418/i-need-an-overflow-to-truncate-from-the-left-with-ellipses Hope it can help you!!! — Luis Antonio Pestana, Jul 25 '18 at 03:34

Kosh · Answer 1 · 2018-07-25T05:00:15.917

4

You might use text-overflow and direction properties.

div {
  margin:1rem;
  direction: rtl;
  text-align: left;
  width: 45vw;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

<div>Building Name / Floor Number / Section Name / Room Number / Desk Number</div>

edited Jul 25 '18 at 05:00

answered Jul 25 '18 at 03:40

Kosh

16,966
2
19
34

Left align text but prefix with ... if too long on left

1 Answers1