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

Question

I have a pretty simple div that I created using CSS

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

It basically makes a gray window with some white text with a size of 200 pixels by 80 pixels.

What I would like to do is if the text exceeds 200px and wraps on the next line, a few transparent spaces are added.

So for example, if I have the following HTML:

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

I would get the following:

If the background has a different color (blue in this example), the “space” will be transparent and let the blue pass. The background color is based on what the user selects. It can also be a picture, so I can’t precisely control what it will be.

Suppose the text is larger than 200px and that it automatically wraps. There are no two separate div tags. I also do not control the length of the text - it can be from 0 to 60 characters.

Answer 1

You can do this with 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 following two colors: transparent , and they end in the text line-height .

Excerpt:

 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> 

Answer 2

I was able to come up with something like this, but the gray background, unfortunately, will not be the width of the container. You will also need a span in the div.

 .text-highlight { background:#fff; width:200px; } .text-highlight span { font-size:24px; color:#000; background:#ccc; line-height:42px; } 

 <div class="text-highlight"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, et, ratione. At facere nisi facilis nulla officiis, suscipit saepe quos cum et sequi nostrum amet atque non quam, consequatur dolor.</span> </div> 

Edit: you can justify the width of the inline elements by specifying it in the parent container ... however this may not look so good.

 .text-highlight { background:#fff; width:200px; text-align:justify; } .text-highlight span { font-size:24px; color:#000; background:#ccc; line-height:42px; } 

 <div class="text-highlight"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, et, ratione. At facere nisi facilis nulla officiis, suscipit saepe quos cum et sequi nostrum amet atque non quam, consequatur dolor.</span> </div> 

Answer 3

I'm not sure how to do this with a single div element. Please check the code below. This can help you.

 <div class="text"><span> Here is some text that I typed </span</div> .text { text-transform: capitalize; color: #FFFFFF; opacity: 0.6; font-size: 2em; height: 80px; width: 200px; } .text span{ background: #918a8a; line-height:20px; }