style.css
setup.css
index.html
section:nth-child(1) { -webkit-hyphens: none; /* Safari uses prefix. */ hyphens: none; /* Default. */ } section:nth-child(2) { -webkit-hyphens: auto; /* Safari uses prefix. */ hyphens: auto; /* Browser decides. */ } section:nth-child(3) { -webkit-hyphens: manual; /* Safari uses prefix. */ hyphens: manual; /* Specify with `­` */ }
body { --base: 20px; display: grid; font-family: 'Helvetica', sans-serif; gap: var(--base); padding: var(--base); } section { background-color: gold; padding: calc(var(--base) / 2); } h2 { font-size: calc(var(--base) * 3); }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/assets/styles/reset.css" rel="stylesheet"> <link href="setup.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <section> <p>This is a paragraph, so we have some text to overflow our container. Another line, with some verbose, exquisite, extra­ordinarily long, English words.</p> </section> <section> <p>This is a paragraph, so we have some text to overflow our container. Another line, with some verbose, exquisite, extra­ordinarily long, English words.</p> </section> <section> <p>This is a paragraph, so we have some text to overflow our container. Another line, with some verbose, exquisite, extra­ordinarily long, English words.</p> </section> </body> </html>