<!DOCTYPE html>
<!--
 | Wrapping is only performed at an allowed break point, called a soft wrap
 | opportunity. In most writing systems, in the absence of hyphenation a soft
 | wrap opportunity occurs only at word boundaries.
 |   https://www.w3.org/TR/css3-text/#soft-wrap-opportunity
 |
 | Element edge is an extralinguistic concept and as such should not introduce
 | a soft wrap opportunity.
 -->
<html>
<head>
  <style>
    body {
      font-size: 100px;
    }
    div {
      background-color: #ffea00;
      width: 100px;
    }
    span {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div>
    Cali<span>for</span>nia
  </div>
</body>
</html>