Question

jsFiddle

In this example the two quotes both have the same width. What I want to happen is that the quote’s width is determined 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>

Answer 1

have you tried display:inline-block?