css/css-text/word-break/break-boundary-2-chars-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Text Test: soft wrap opportunity at boundary between two characters</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property">
  <link rel="match" href="reference/break-boundary-2-chars-002-ref.html">

  <meta content="The word-break property can only apply when the 'white-space' value allow text wrapping, when line breaking opportunities are preserved. Therefore, 'word-break: break-all' must not cause any text wrapping in both cases of this test. There must be no wrapping between the 'c' and the 'x' and there must be no wrapping between the 'z' and the 'd'." name="assert">

  <!--

  white-space values that DISallow text wrapping:
  { pre , nowrap }

  -->

  <style>
  div
    {
      display: inline-block;
      font-size: 32px;
      margin-right: 10ch;
      width: 0;
      word-break: normal;
    }

  span
    {
      word-break: break-all;
    }

  div#first-sub-test
    {
      white-space: pre;
    }

  div#second-sub-test
    {
      white-space: nowrap;
    }
  </style>

  <div id="first-sub-test">abc<span>xyz</span>def</div>

  <div id="second-sub-test">abc<span>xyz</span>def</div>