How can I make a span text overflow, like an input

Question

I am trying to achieve this with a span:

enter image description here

This is what I have:

<span>some text goes here</span>

span{width:50px;overflow:hidden;float:left;}

This gives me this:

enter image description here

I tried every possible way I could think of but the text keeps moving downwards. I don't want to specify the height.

score 19 · Accepted Answer · answered Jan 07 '12 at 09:20

19

Use white-space: nowrap. Otherwise the content will always expand the box vertically.

answered Jan 07 '12 at 09:20

nikc.org

Thank you. Pretty much what I was looking for – jQuerybeast Jan 07 '12 at 09:23
Hi, @nikc.org. That works almost like an input text, but with one important difference: when an input text overflows, the "overflowed" content is the beggining. I means, I want the overflow occurs on the left, keeping visible the last part of text. I tried a solution explained [here](http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side), but it has a bug when we use special caracters on text. I will really appreciate some help here. – robsonrosa Apr 28 '15 at 12:37
@robsonrosa Hi, you should open a new question. – nikc.org Apr 28 '15 at 12:40

1 Answers1