How to highlight long sentences with padding in a paragraph? - html

Question

I would like to highlight sentences in some text. The normal way is to wrap the sentence in a span element and set a background color:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. <span class="highlight">Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
And:
.highlight{
background-color: yellow;
}
If I now want to use some padding and other styles with this highlight, I have a problem:
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px
}
With small highlights, this problem is adequately solved by display: inline-block;. But here I now have the problem of my sentence being, well, a block, breaking the text in three paragraphs:
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px;
display: inline-block;
}
Is there a way to use inline-block without all the trouble?
Working JS fiddle

Answer 1

Use line-height property. Do little bit math, if your font-size is 16px and you are adding 5px padding then line-height will be 26px
p{
width: 300px;
}
.highlight{
background-color: yellow;
padding: 5px;
border-radius: 5px;
line-height: 26px;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="highlight">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 2

It sounds to me like you're not entirely clear what you want. Observer has given you a solution that might work for you and might not, since the line height persists throughout your entire paragraph, making all of the lines wider. If that is indeed what you want, then you have your answer.
From a UX perspective, though, it seems to me that you need to take a couple of steps back. Do you really want to set highlighted text apart in such a way as it interrupts the flow of reading? That's what you will do, if you add extra padding to it. The idea that you don't like it to be set apart as a paragraph suggests that you don't want padding to be added to it, because after all that's how a paragraph is set apart.
If you want to keep the sentence in with the rest of the paragraph and pad it as well, you can probably go to the trouble of figuring out exactly how to do it, but you'll notice that a line that has a combination of both highlighted and normal text will have the entire line padded. So you'll have some normal text that will be set apart farther than other normal text, as in Observer's sample. That draws the reader's attention to the text in such a way as to be distracting.
If you wanted it to stick out more than it would by just highlighting it, you could put a border around it, as in my example. But I think that looks a bit off, too, because the border gets broken on line breaks. You might consider putting a border on just the top and bottom as well.
In the end, though, I would stick to what everyone else does, and just change the color. That's what readers are used to, and if you change it, they'll have to take a little time to figure out what you're up to.
.highlight{
background-color: yellow;
border: 1px solid green;
padding: 0 5px;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="highlight">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>