<h1 class="main-title font-effect-shadow-multiple">Overflow Wrap In A Flex Container</h1>
<main class="main">
  <div class="card-container">
    <h2 class="card-title"><code>overflow-wrap: normal</code> in non flex container</h2>
    <div class="card-body">
      <p class="card-body-content">The longest word in any of the major English language dictionaries is <span class="highlight">pneumonoultramicroscopicsilicovolcanoconiosis</span>, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
    </div>
  </div>

  <div class="card-container">
    <h2 class="card-title"><code>overflow-wrap: normal</code> in a flex container</h2>
    <div class="card-body flex">
      <p class="card-body-content">The longest word in any of the major English language dictionaries is <span class="highlight">pneumonoultramicroscopicsilicovolcanoconiosis</span>, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
    </div>
  </div>

  <div class="card-container">
    <h2 class="card-title"><code>overflow-wrap: break-word</code> in non flex container</h2>
    <div class="card-body">
      <p class="card-body-content wrap-break-word">The longest word in any of the major English language dictionaries is <span class="highlight">pneumonoultramicroscopicsilicovolcanoconiosis</span>, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
    </div>
  </div>

  <div class="card-container">
    <h2 class="card-title"><code>overflow-wrap: break-word</code> in a flex container</h2>
    <div class="card-body flex">
      <p class="card-body-content wrap-break-word">The longest word in any of the major English language dictionaries is <span class="highlight">pneumonoultramicroscopicsilicovolcanoconiosis</span>, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
    </div class="card-body">
  </div>

  <div class="card-container">
    <h2 class="card-title"><code>overflow-wrap: anywhere</code> in a flex container</h2>
    <div class="card-body flex">
      <p class="card-body-content wrap-anywhere">The longest word in any of the major English language dictionaries is <span class="highlight">pneumonoultramicroscopicsilicovolcanoconiosis</span>, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>
    </div>
  </div>
</main>

@import url("https://fonts.googleapis.com/css?family=Poppins:wght@400;700&family=Rancho&display=swap&effect=shadow-multiple");

* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.main {
  margin: 3rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em 10em;
}

.main-title {
  font-family: "Rancho", cursive;
  font-size: 3rem;
  text-align: center;
}

.card-container {
  width: 100%;
  max-width: 400px;
  padding: 1.5em;
  color: #322747;
  background: #e0d4f6;
  border: 2px dotted #322747;
  border-radius: 5px;
}

code {
  background: #fff;
  padding: 0.25em;
  border-radius: 3px;
}

.highlight {
  font-weight: 700;
  text-transform: uppercase;
}

.flex {
  display: flex;
}

.wrap-break-word {
  overflow-wrap: break-word;
}

.wrap-anywhere {
  overflow-wrap: anywhere;
}