环绕文字的矩形背景色

Question

I'm working on a web app and am looking for a way to show a colored background around a block of text, but in the case where the text wraps onto 2 or more lines, I only want the background to extend as far as the furthest of any of the lines of text, not as far as the edge of the container, which seems to be the default behavior.

Fiddle that illustrates the problem and also what I'm looking for.

Here is the simplified issue:

<div class="outerContainer">
 <div style="background:blue">
  wrapped and workingasdesired
 </div>
</div>

I would like a way to display this as such

*wrapped and      *      |  
*workingasdesired *      |

Where | represents the edge of the outer container, and * would be the highlighted area

However, what actually happens is that the highlighting extends all the way to the end of the outer container:

*wrapped and            *|  
*notworkingasdesired    *|

I've searched around on Stack Overflow and also played with the fiddle for quite a while, but haven't had any luck.

A CSS-only solution would be the holy grail, but suggestions on good ways to accomplish this with JS would also be great!

Answer 1

Maybe it's not exactly what you want, but you can try find a solution using inline-block in the inner div like this:

.outerContainer {
    width:180px;
    background-color: red;
}
.outerContainer div{
    display:inline-block;
    background-color: blue;
}

The fiddle showing it: Fiddle

Hope it helps.