JSFiddle - React, Tailwind, and code Playground

by brucifer906

HTML

<html lang="en">
  <div class="wrapper">
    <p>
      Three examples showing that capitilized words don't get hyphenated.
    </p>
    <div>
      Mr. Brotherton is extraordinary and strengthed
    </div>
    <div>
      This is Done with Ordanary Title Capitalization
    </div>
    <div class="title">
      this title is done with text-transform: capitalize
    </div>
    <div>
      Supercalifragilisticexpialidocious is not an Eng&shy;lish word.
    </div>
    <div>
    <br>
    Though suoicodilaipxecitsiligarfilacrepus is going a little too far don't you think?
    </div>
  </div>
</html>

CSS

html {
  font-size: 1.5rem;
}

p {
  width: 100%;
  text-align: center;
}

div {
  width: 3rem;
  border: 1px solid black;
  hyphens: auto;
}

.title{
  text-transform: capitalize;
}

.wrapper {
  margin:0 auto;
  width: 90%;
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
}