Take the 2-minute tour ×

I'm trying to have my span begin a new line on overflow; It seems very trivial, but I just can't seem to make it work.

I am aware that it is by default inline, so I am trying to set it to block. I have tried both changing the css display, as well as applying clear: both in case any outside css is affecting it, but I still can't get it to display properly. I've made a fiddle to show my issue: http://jsfiddle.net/QUpPn/


share|improve this question
Why the down vote, I don't see any problem with this question –  Tom Sarduy Jan 23 '13 at 7:06
You should show an example of actual text content, not sdfsdfsdfsdfsdfsdffsdfsdfdsfsdfsdfsdfdsfsdfsdfsdfsdfdsf. The correct answer depends on the content. Without disclosing real content, you’ll probably get just snake-oil answers. –  Jukka K. Korpela Jan 23 '13 at 7:06
@JukkaK.Korpela Well I've certainly realized that now- it was what was causing my bug in the first place, so I'm not likely to repeat it. Learning means recognizing your mistakes! –  Ari Jan 23 '13 at 7:08

2 Answers 2

up vote 1 down vote accepted

It's not a problem of span. Use word-wrap:break-word; for this. Write like this:

#test {
    background-color: #ccc;
    width: 100px;
    display: block;
    clear: both;

Check this http://jsfiddle.net/QUpPn/1/

share|improve this answer
Well shoot; My actual text is going to include spaces, but I was just using that as a precursor to test it. Perhaps I should use spaces in my tests from now on! Regardless, the word wrap is useful to know; thank you! –  Ari Jan 23 '13 at 7:04

Simply just add word-wrap:break-word; to your #test class.

And also you can use text-align:justify; to make the text better view.

jsFiddle Live Demo

share|improve this answer

Your Answer


