Why isn't max-width working in this situation?

jsFiddle

In this example the two quotes both have the same width. What I want to happen is that the quote's width is dete开发者_如何学Pythonrmined by the length of the quote, but it cannot go over 200px.

So the first quote should have a width of 200px, but the second quote should dynamically be 60px, ending just after the 5 in the first line.

How can I do this?

CSS

.inner_quote {
    background:RGBA(255,250,205,.4);
    margin-left:50px;
    max-width:200px;
    display:block;
}

HTML

<span class="inner_quote">
    1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 1 23 345 421 6ffa vvxb 
</span>
...
<span class="inner_quote">
    1 23 345
    <br>
    5552
</span>

have you tried display:inline-block?

property-display:block tries to take up all the available width.

Since you mentioned the max-width property to 400px in the first span it wont go further. Though in second case pixels are requiered less but display:block property stretches the container as much as possible and is then restricted by the max-width mentioned.

property-display:inline-block will solve this issue as it maintains the block structure and just takes the space that is required by the container.

The width issue is down to your display: block; on .inner_quote; block will fill available width...

Now you can fix this by floating (float: left;) but you will need to do some float clearing to keep it tidy...