How can I divide a div by utilizing word wrap?

Question

How can I divide a div by utilizing word wrap?

My CSS-styled div is pretty straightforward

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

It creates a grey box with white text inside, measuring 200px by 80px.

I'm looking to add some "transparent" whitespace if the text wraps to the next line beyond the 200px limit.

For example, in the following HTML:

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

It should look like this:

https://i.sstatic.net/Aklg4.png

If the background changes (like blue), the transparent "whitespace" would allow the new color to show through. The design will change based on user choice, even potentially using images.

https://i.sstatic.net/r7hil.png

The text may vary in length from 0 to 60 characters and wrap automatically within one div tag.

html css

Answer 1

Answer №1

If you want to achieve this effect, you can utilize the repeating-linear-gradient property in CSS:

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

The initial two colors will act as the "background" color and will extend over your text.

The subsequent two colors are set to be transparent, reaching up to the defined line-height of the text.

Code 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>

Answer 2

If you want to achieve this effect, you can utilize the repeating-linear-gradient property in CSS:

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

The initial two colors will act as the "background" color and will extend over your text.

The subsequent two colors are set to be transparent, reaching up to the defined line-height of the text.

Code 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>

Answer 3

Answer №2

After some tinkering, I managed to create a solution that somewhat functions, although the gray background unfortunately doesn't extend to the width of the container. To fix this, you will need to include a span inside 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 adjust the width of the inline elements by specifying it in the parent container...although the result may not be as aesthetically pleasing.

.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 4

After some tinkering, I managed to create a solution that somewhat functions, although the gray background unfortunately doesn't extend to the width of the container. To fix this, you will need to include a span inside 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 adjust the width of the inline elements by specifying it in the parent container...although the result may not be as aesthetically pleasing.

.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 5

Answer №3

I am not entirely certain how to achieve this using only one div element. Please see the code snippet below as it may provide some assistance:

<div class="content"><span> This is an example text that I have entered </span</div>

.content {
        text-transform: uppercase;
        color: #000000;
        opacity: 0.8;
        font-size: 1.5em;
        height: 60px;
        width: 150px;
}
.content span{
        background: #765432;
        line-height:15px;
}

Answer 6

I am not entirely certain how to achieve this using only one div element. Please see the code snippet below as it may provide some assistance:

<div class="content"><span> This is an example text that I have entered </span</div>

.content {
        text-transform: uppercase;
        color: #000000;
        opacity: 0.8;
        font-size: 1.5em;
        height: 60px;
        width: 150px;
}
.content span{
        background: #765432;
        line-height:15px;
}

How can I divide a div by utilizing word wrap?

Answer №1

Answer №2

Answer №3

Similar questions

The JavaScript creates a select box, but the value does not get sent when the form is submitted

The iFrame that is generated dynamically becomes null when accessed from a page that has been loaded using JQuery

What is the best way to move to a new line without creating a space between the current line and the new line?

Developing a fresh Outlook email using a combination of javascript and vbscript

Using padding and float properties in the a tag of HTML does not result in the expected behavior

Utilizing jQuery Mobile - Dividing content across multiple HTML files

How can I align an input to the right using Bootstrap?

Issue with closing collapsed menu on click in Bootstrap version 3

Turning On/Off Input According to Selection (Using jQuery)

I'm having trouble getting Jquery's insertAfter() function to function properly

PHP not compatible with Fancybox iframe

The tab functionality in Bootstrap is malfunctioning

Adding a slight 1px right margin between an HTML table and its enclosing div in Bootstrap 3

Dynamic Bootstrap Table with Fixed Header

use ajax to dynamically load a section of the webpage based on filter criteria

Troubleshooting Problem with Accordion Size in CSS

Firefox failing to interpret nested element background

What is the reason for having a space between the <body> and the <html> tags?

Customizing the Twitter bootstrap navigation in Wordpress

What is the best way to retrieve the color of a WebElement when dealing with a complex CSS structure in Webdriver