On my website I have code snippets as rectangular areas with a scrollbar if the text overflows horizontally. I would like to mark insertions and deletions with <ins> and <del> and style those as lines with green and red background.

Something like this:

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; } <pre> <del>This line just got deleted</del> This line did not change <ins>This line just got inserted</ins></pre> <pre> <del>This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</del> This is a short line <ins>This line is short too</ins></pre>

I want the green and red highlight to take the whole horizontal line even if the text is short, but if I just add width:100% then it cuts off long lines when scrolling. In snippets with overflowing lines, all highlighted lines should extend to the length of the longest:

Screenshot of the result, with corrections drawn on it

The last image is what happens when I add width: 100%; display: block; to both <ins> and <del>, and also what I would like to avoid

I have seen this answer but I do not know how to apply that to my case.

NicknEma's user avatar

1

I tried declaring display: inline-block; min-width: 100%; for del, ins
Long lines of text are fully colored, but the lines are not all the same length (shorter lines end at 100% width.)

pre { width: 550px; background-color: #ddd; border: 1px solid black; overflow: auto; } del, ins { display: inline-block; min-width: 100%; text-decoration: none; } del { background-color: #fdd; } ins { background-color: #dfd; } <pre> <del>This line just got deleted</del> This line did not change <ins>This line just got inserted</ins></pre> <pre> <del>This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</del> This is a short line <ins>This line is short too</ins></pre>

I wound up implementing display: grid on pre as Temani commented.
I don't know what whitespace-preserving features you are wanting to use pre for, but if you want single lines of text, you can also add white-space: nowrap; to avoid additional linebreaks between the lines.

pre { display: grid; width: 550px; background-color: #ddd; border: 1px solid black; overflow: auto; white-space: nowrap; } del { text-decoration: none; background-color: #fdd; } ins { text-decoration: none; background-color: #dfd; } <pre> <del>This line just got deleted</del> This line did not change <ins>This line just got inserted</ins></pre> <pre> <del>This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</del> This is a short line <ins>This line is short too</ins></pre>

Tim R's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.