Выравнивание фона по окончанию отдельной строки

[Olegs2]

Есть абзац, его код:

<div style="background-color:red; position:fixed;">
111111111111<br>
22222
</div>

не могу выровнять в нем фон по окончанию каждой строки, на данный момент он выравнивается по окончанию самой длинной строки в абзаце.

Подскажите как решить задачу, спасибо.

Edited February 10, 2012 by Olegs2

[Arinden]

<div style="position:fixed;">
<span style="background-color:red;">111111111111<br>
22222</span>
</div>????

[Olegs2]

Не совсем то что нужно. Если добавить текст то видно что происходит наложение и если добавить padding то он действует лишь на второе предложение.

<div style="position:fixed;">
<span style="background-color:red; padding: 3px;">pppppMyyyy<br>
JJJMmM</span>
</div>????

Edited February 10, 2012 by Olegs2

[Arinden]

Попробуйте как-нибудь так.

Edited February 10, 2012 by Arinden

[Arinden]

Через JS можно так:

CSS

p {
	color: #000;
}
p span {
	background: #F00;
	padding: 5px;
}

JS

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(document).ready(function(){
	$('p').inlinebackgrounds();
});
(function($){
	$.fn.inlinebackgrounds = function() {
		$.each(this, function(i,t) {
			var split = $(t).html().split('<br>');
			var output = '';
			$.each(split, function(i,o){
				output += '<span>'+o+'</span>';
				if (i < (split.length - 1)) {
					output += '<br>';
				}
			});
			$(t).html(output);
		});
	}
})(jQuery);
</script>

HTML

<p>Строка 1<br>Строка 2 Строка 2<br>Строка 3 Строка 3 Строка 3<br>Строка 4 Строка 4 Строка 4 Строка 4</p>