Question

This is the html code for my comment list:

<div id='commentbox'>
    <ul id='holder'>        
        <li class='comment'><span class='commenter'>commenter1: </span>
            <span class='commsg'>blabla1</span>
        </li>    
        <li class='comment'><span class='commenter'>commenter2: </span>
            <span class='commsg'>blabla2</span>
        </li>
        <li class='comment'><span class='commenter'>commenter3: </span>
            <span class='commsg'>blablaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3</span>
        </li>
        <li class='comment'><span class='commenter'>commenter4: </span>
            <span class='commsg'>blabla4</span>
        </li>    
    </ul>
</div>

And here is the css:

.comment{
    border-style:solid;
    width:500px;
}
.commsg{
    font-size: 12px;
    color: #333333;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
.commenter{
    font-family: 'Gill Sans', Verdana;
    font-size: 11px;
    line-height: 14px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: bold;
}

My problem is that if I insert a big comment like the third one, it gets out of the <li> border. How can I have a certain comment width?

Problem solved. Thank you both.

Answer 1

In Firefox your current markup and styles should work fine. The problem is, your test comment has no spaces in it, so it is treated as one word. Browsers aren’t smart enough to be able to break up a word with a dash, like a word processor.

Check out this fiddle. Note the huge comment. It wraps just fine and leaves the <li> width as is.

Now check out this fiddle. See how when there are no spaces in the word, it overlaps. The browser doesn’t know what else to do with it.

One way around it would be to scroll the overflow from your .comment element:

overflow-x:scroll;

See fiddle. The downside is the scrollbars on each element, which don’t look great, but at least get the job done if there is a huge word without spaces (such as a hyperlink, etc.)