<!DOCTYPE html>
<!--
 | When an inline box exceeds the width of a line box, it is split into several
 | boxes and these boxes are distributed across several line boxes.
 |   https://www.w3.org/TR/CSS21/visuren.html#inline-formatting
 -->
<html>
<head>
  <style>
    body {
      margin: 0px;
      color: #fff;
      font-family: Roboto;
      font-size: 20px;
      font-weight: bold;
    }
    .containing-block {
      background-color: #03a9f4;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="containing-block">
    The
    <span>Hegemony Consul sat on the balcony of his ebony spaceship and played
    Rachmaninoff's Prelude in C-sharp Minor on an ancient but well-maintained
    Steinway while great, green, saurian things surged and bellowed
    in the swamps below.</span>
  </div>
</body>
</html>