Question

I am looking to create the effect shown in the following image:

Where the black background behind the text staggers, rather than creating a black box when the string wraps. Can this be achieved with just CSS on a dynamic string?

Answer 1

Here is how you do it. The basic idea is to wrap each word in a separate div and nest those divs within another div with a width that wraps the inline divs.

<style>
    .foo {
      display: inline;
      background-color: #000;
      color: #fff;
      margin: 0;
    }

    .wrapper {
      width: 100px;
    }
</style>
<div class="wrapper">
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div>
 </div>