Is there a way to split a div based on word wrap?

Question

I have a fairly simple div that I have styled with CSS

.text { text-transform: capitalize;
        color: #FFFFFF;
        background: #918a8a;
        opacity: 0.6;
        font-size: 2em;
        height: 80px;
        width: 200px;
     }

It basically makes a grey box with some white text it in with dimensions 200px by 80px.

What I would like to happen is if the text exceeds the 200px and wraps to the next line, some transparent whitespace is added.

So, for instance, if I have the following HTML:

<div class="text">Here is some text that I typed</div>

I would get this:

If the background is a different color (in this example, blue) the "whitespace" would be transparent and allow the blue to come through. The background color is based on what the user picks. It could also be a picture, so I have no definite control over what it will be.

Assume that the text exceeds the 200px size and that it automatically wraps. There isn't two separate div tags. I also have no control over the length of the text - it could be anywhere between 0 and 60 characters.

Answer 1

You can do this with a repeating-linear-gradient:

.text {
  font-size: 30px;
  line-height: 50px;
  background-image: repeating-linear-gradient(
    blue, 
    blue 45px,
    transparent 45px,
    transparent 50px
  );
}

The first two colors will be your "background" color, and they will cover your text.

The next two colors are transparent, and they'll end at the text's line-height.

Snippet:

body {
  background: #cfc;
}

.text {
  color: #FFFFFF;
  width: 300px;
  font-size: 30px;
  line-height: 50px;
  background-image: repeating-linear-gradient(
    blue, 
    blue 45px,
    transparent 45px,
    transparent 50px
  );
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>