Adding ellipsis to the first of a set of spans

Question

I have something like this:

<p id="container">
  <span id="t1">This could be a very long text </span>
  <span id="t2">&#160;suffix 1</span>
  <span id="t3">&#160;suffix 2</span>
</p>

What I would like to do is, depending on the space available for the #container, adding ellipsis to the first of the spans so I would end up with something such as:

This is a very long text suffix 1 suffix 2 // If enough space available for everything.

This is a very long... suffix 1 suffix 2 // If there is not enough space available for everything.

This is a v... suffix 1 suffix 2 // If there is even less space available.

As you can see, the space for the suffix should be always preserved and only the first span text should be applied ellipsis.

Thank you very much for your help in advance! ;-)

score 0 · Answer 1 · answered Dec 11 '12 at 18:50

0

You can accomplish this using CSS property text-overflow:ellipsis

#t1 {
  display:inline-block;
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

You can find a full reference/tutorial on how to use it here: http://davidwalsh.name/css-ellipsis

answered Dec 11 '12 at 18:50

Jason

2,280
23
22

Hi Jason, thank you very much for your answer :) The only drawback to your solution is that I would need to set the width of the #t1 span and I may not know that information in advance since not only the container where the
is included may be variable but also the possible suffixes. I could use your technique combined with using getComputedStyle() but I was hoping for something 100% CSS-oriented. Please, have a look at this http://jsbin.com/aregeq/1/edit to see what I would be looking for. As I said, not only the div's width but also the suffixes' width may be variable... ;-) Thanks!
– Germán Toro del Valle Dec 11 '12 at 23:07
So, is that link your solution? Or is there more to it? – Jason Dec 11 '12 at 23:15

score 0 · Answer 2 · answered Dec 12 '12 at 18:59

0

As I said, for the time being the best solution I've found is Javascript-based. See: http://jsbin.com/aregeq/4/edit

answered Dec 12 '12 at 18:59

Germán Toro del Valle

105
6

Adding ellipsis to the first of a set of spans

2 Answers2