How to highlight some phrases with rounded boxes in text with CSS?

user_7868758 0
Viewed 900

I need to highlight some texts in a paragraph but there are some constraints -

  1. The text outside of the highlights should also be on the same level as the highlighted text
  2. If there are multiple words consecutively then they come under a continuous highlight which can be easily achieved by just putting the whole thing in a tag
  3. If the text moves on to the next line there should be a gap in the highlight in between the two lines and not just a rectangle patch
  4. There should be enough distance between two lines such that it does not look messed up.

TLDR: I want something exactly like the image linked below. Thanks for the help.

Text Highlighted Outcome

This is what I have done

<p class="introduction">
Hi so<span>This is what I did but not sure how to go from here</span></p>

p.introduction {
  width: 150px;
}

p.introduction span {
  background-color: #f48024;
  color: #1d1d1e;
  border-radius: 25px;
  float: left;
  padding: 0 5px 0 5px;
}
css html
2 Answers

box-decoration-break: clone; can do this

p.introduction {
  width: 350px;
  font-size:25px;
  line-height:1.3;
}

p.introduction span {
  background-color: #f48024;
  color: #1d1d1e;
  border-radius: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 5px 0 5px;
}
<p class="introduction">Hi so <span>This is what I did but not sure how to go from here</span> and here is another <span>highlighted span</span></p>

user_86203330

Maybe, this will work.

/* Some decorations */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.text {
  padding: 50px;
  font-family: 'Roboto', sans-serif;
  line-height: 2;
  color: #293241;
}

/* Main part */

span {
  background: #ee6c4d;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 0 5px;
  -webkit-box-decoration-break: clone;
  -moz-background-inline-policy: clone;
  box-decoration-break: clone;
}
<article class="text">
<span>Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Duis consequat justo nec orci tincidunt posuere. Curabitur fringilla dolor a vestibulum rhoncus. Nam et feugiat lorem. Aliquam sollicitudin velit vel mi bibendum vehicula. Nam in est sed nibh dapibus iaculis. Aliquam porta vulputate imperdiet. Maecenas sagittis urna nec massa ullamcorper congue. Quisque dapibus augue et odio laoreet pharetra. <span>Etiam eget rhoncus lacus.</span> Praesent eu quam sed neque sodales venenatis non nec lorem. Sed fermentum efficitur massa vel egestas. Pellentesque condimentum in dolor sed faucibus. Integer nec urna mattis, dignissim neque at, pharetra odio. Nullam at ultrices quam. <span>Phasellus sagittis mi varius nulla</span> egestas, at laoreet orci tristique. Integer tempus orci in ipsum accumsan, at convallis justo dignissim.
</article>

On JSFiddle

user_114413790
Related