css/css-text/hyphens/hyphens-manual-013.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Text: 'hyphens: manual' with 1 explicit hyphenation opportunity</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/#hyphenation">
  <link rel="match" href="reference/hyphens-manual-013M-ref.html">
  <link rel="match" href="reference/hyphens-manual-013H-ref.html">

  <!--
  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
  when the font has the glyph, or
  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
  otherwise. Some fonts will display slightly different glyphs for
  these code points. Therefore these 2 reference files.
  The M-ref.html reference file means the hyphen-Minus character U+002D.
  The H-ref.html reference file means the Hyphen character U+2010.
  -->

  <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 1 and only 1 hyphenation opportunity, so it can be hyphenated only at such point." name="assert">

  <style>
  div
    {
      border: black solid 2px;
      font-family: monospace;
      font-size: 32px;
      hyphens: manual;
      width: 10ch;
    }
  </style>

  <div>Deoxy&shy;ribonucleic acid</div>

  <!--
        Expected result:
        Deoxy-
        ribonucleic
        acid
  -->

  <!--

  Extended form of abreviation DNA

  -->