CODEWITHSUNDEEP
htmlcssfrontend
P. Kudła
P. Kudła

Reputation: 105

Automatic wrapped multiple line text with space between highlighted lines

Question regarding CSS.

I will receive sentences like: This is a sentence and I will automatically break it to new lines regarding the parent's container width. So, for example, I will have

This is a sentence

What I am trying to do can actually can be seen in this code example. The lines are highlighted but there is some space (with white color) between lines. When setting some color background-color: black I can't create such spaces changing line-height. I also tried setting linear-gradient as background but it doesn't work the way I wanted.

This can be done by wrapping lines in span tags, but I want to avoid additional backend work.

Is there any obvious solution I missed or is a little bit tricky?

div {
  width: 200px;
}

h1 {
  background-color: red;
  line-height: 50px;
}
<div>
  <h1>Some text and its wrapping</h1>
</div>

Upvotes: 1

Views: 503

Answers (1)

Huelfe
Huelfe

Reputation: 1836

Without backend work it is simply not possible - you need a wrapping element for the fixed width.

But you don't need extra elements for each line. Check this:

div {
  width: 200px;
  display: block;
}

h1 {
  background-color: red;
  font-size: 36px;
  font-weight: bold;
  line-height: 50px;
  display: inline;
}
<div>
  <h1>This is a sentence.</h1>
</div>

Or you use pseudo elements:

div {
  width: 200px;
  display: block;
}

div:after {
  background-color: red;
  font-size: 36px;
  font-weight: bold;
  line-height: 50px;
  display: inline;
  content: attr(data-content);
}
<div data-content="This is a sentence."></div>

Upvotes: 2

Related Questions