Выделять целые строки, если они могут быть переполнены ⇐ Html

[Anonymous]

На моем веб-сайте фрагменты кода представлены в виде прямоугольных областей с полосой прокрутки, если текст выходит за пределы горизонтали. Я хотел бы пометить вставки и удаления с помощью и и оформить их в виде линий с зеленым и красным фоном.
Примерно так:

Код: Выделить всё

pre {
width: 550px;
background-color: #ddd;
border: 1px solid black;
overflow: auto;
}

del { text-decoration: none; background-color: #fdd; }
ins { text-decoration: none; background-color: #dfd; }

Код: Выделить всё

This line just got deleted
This line did not change
This line just got inserted

This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line
This is a short line
This line is short too

Я хочу, чтобы зеленая и красная подсветка занимала всю горизонтальную линию, даже если текст короткий, но если я просто добавлю ширину:100%, то при прокрутке длинные строки обрезаются. В фрагментах с переполненными строками все выделенные строки должны расширяться до длины самой длинной:


Последнее изображение — это то, что происходит, когда я добавляю ширину: 100%; display: block; как для , так и для , а также то, чего мне хотелось бы избежать
Я видел этот ответ, но не знаю, как применить его в моем случае.

Подробнее здесь: https://stackoverflow.com/questions/798 ... verflowing