Strikethrough/line through on text in HTML




Highlighting text using strikethrough/line through

In the same manner as underlining a text, you can do a strikethrough, where a horizontal line goes through the text.

Strikethrough/line through can only be done in one way: STYLE="text-decoration: line-through". The style has to be used on a tag for text sections, e.g. <P>, <DIV> and <SPAN>. The way text decorations are normally used for texts, <SPAN> will usually be a good solution, as it doesn't add any other formatting to the text string.

A piece of text will look like this as code:

Here the text is normal, <SPAN STYLE="text-decoration:line-through">here the text has strikethrough,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here the text has strikethrough, and here the text return to normal.





Combination effects with other types of styling

This type of styling is, in combination with other effects, very sensitive to both programming and browser. So, here it is of utmost importance to test on the various browser types and versions of these.

The thickness of the line is affected by some browsers, wben the text is in bold, so here you have to be a bit careful with your combinations. Når man arbejder med en tekst-streng der alligevel er stylet af en tag som f.eks. <SPAN>, så plejer jeg at anbefale at man tilføjer sin styling på dette, hvis det er praktisk muligt. Det er en praktisk ting omkring overskueligheden af koderne. Koden for kombinationen ser i så fald således ud:

Here the text is normal, <SPAN STYLE="text-decoration:line-through; font-weight:bold">here the text becomes bold with strikethrough,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here the text becomes bold with strikethrough, and here the text return to normal.



Line thickness and placement is also affected by the font size, e.g. at supscript and subscript, but the effect depends on the browser being used. Here you also have to be aware of combination effects, where variations in programming can cause differences in effects.

If we look at at temporary change in font size to 16.0 pt, where each section is controlled by a separate code, the code looks like this:

Here the text is normal, <SPAN STYLE="text-decoration:line-through">here the text has strikethrough,</SPAN> <SPAN STYLE="text-decoration:line-through; font-size:16pt;">here the text changes to strikethrough and font size 16.0 pt,</SPAN> and here the text return to normal.


On the page, when shown, it looks like this:

Here the text is normal, here the text has strikethrough, here the text changes to strikethrough and font size 16.0 pt, and here the text return to normal.


If, on the other hand, you make a section with a new font size, inside the section with strikethrough, the code looks like this:

Here the text is normal, <SPAN STYLE="text-decoration:line-through">here the text has strikethrough, <SPAN STYLE="font-size:16pt;">here the text changes to strikethrough and font size 16.0 pt,</SPAN></SPAN> and here the text return to normal.


On the page, it looks like this.

Here the text is normal, here the text has strikethrough, her skifter teksten med gennemstregning til 16.0 pt, and here the text return to normal.


For some browsers you will see one continuous line, while on other browsers, you will see a change in height when the font size changes.