JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/publik.css">
<div lang="en">
  <h1>Ballanced text-wrap is cool but hyphenation suffers from limited controls</h1>

  <h1>Ballanced text-wrap is cool but<br/> hyphenation suffers from limited controls</h1>
</div>

CSS

body {
  margin: 0;
  background: #CCC;
}
div {
  padding: 0 1rem;
}
h1 {
  font-family: Publik;
  text-wrap: balance;
  word-wrap: break-word;
  overflow-wrap: break-word;
	word-break: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 5 5;
  margin: 2rem 0;
  background: #FFF;
}

h1 + h1 {
  text-wrap: inherit;
  hyphens: none;
  background: #FFF linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1)) 100% 0% / 20% 100% no-repeat;
}