Background width for individual text lines - html

Question

Basically what I want to do, considering the example below, is to create a fluid and dynamic background width depending on the text size with more than one line. This because I have set a justified text alignment and at some point (e.g. in the second line) the text doesn't fill up all the width of the background, which is enlarged by the upper sentence which is bigger. I don't want the background to fill it up! I don't know if I'm making myself clear, but I'll try to explain with the example below.
http://jsfiddle.net/gcAhL/
HTML
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title">This is a title</div>
</div>
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</div>
</div>
CSS
.image {
position: relative;
width: 800px;
height: 530px;
margin: 10px;
}
.title {
position: absolute;
background-color: #CCC;
text-align: justify;
max-width: 600px;
bottom: 30px;
padding: 5px;
}
As you can see, the last blue square has text that breaks into two lines. The greyish background fills up the width basing itself on the first line. What I want to happen is that in the second line, the grey fills the text of that line only.
Example: http://s9.postimg.org/634pzc9y7/example.jpg
Is this even possible? Thanks in advance for all the responses.

Answer 1

Just use <span> element inside of your <div> and give background-color to <span> element instead of <div>.
HTML
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title"><span>This is a title</span></div>
</div>
<div class="image">
<img src="http://s23.postimg.org/g033nno17/image.jpg">
<div class="title"><span>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</span></div>
</div>
CSS
.image {
position: relative;
width: 800px;
height: 530px;
margin: 10px;
}
span{background-color: #CCC;}
.title {
position: absolute;
line-height:100%;
text-align: justify;
max-width: 600px;
bottom: 30px;
padding: 5px;
}