1

I have a wrapper element with a variable width (it must depend on the browser current width).

Inside that wrapper there could be 1, 2 or 3 span elements. The length of the text on each spans is unknown.

This is the behavior expected, but for this example I was forced to define a width for each span of 30% (define a width of 30% to use the text-overflow:ellipsis), But, and I can not assign a fixed width in this elements since I font know how many spans will be.

enter image description here

Is there a way to get this behavior without specify a width for each element and without using java script?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Juan Jo
  • 882
  • 2
  • 8
  • 17
  • Can you make a Fiddle ? – DaniP Oct 24 '13 at 16:39
  • Basically, here is your solution: http://stackoverflow.com/a/6311029/27862 Just add `white-space: pre;` to the `li` and set `width: 100%` on the `ol` – user123444555621 Oct 24 '13 at 18:12
  • possible duplicate of [HTML List element : Sharing the parent width into equal parts](http://stackoverflow.com/questions/6310632/html-list-element-sharing-the-parent-width-into-equal-parts) – user123444555621 Oct 24 '13 at 18:14

2 Answers2

0

You have to specify a width otherwize every element will have a width at 100% :/

It's not a problem to not specify a width when there is only 1 element

Julien Rodrigues
  • 908
  • 2
  • 8
  • 18
0

you can count how many spans were rendered then divide the entire width with the number of spans...the result would be the width of each span... then you can do something like

 $('.spans').css('width', computedwidth);
user2756589
  • 431
  • 2
  • 7
  • 18