<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>overflow-wrap-normal</title>
  </head>
  <body>
    <div class="container">
      <div>
        <div>
          <input 
              type="radio" 
              id="1"
              name="css-text-wrap"
              value="default"    
              onchange="changeHandler(this)"
              checked
           />
          <label for="1">default</label>
        </div>
        
        <div>
          <input 
              type="radio"
              id="2"
              name="css-text-wrap"
              value="overflow-wrap-break-word"    
              onchange="changeHandler(this)"
           />
          <label for="2">overflow-wrap: break-word</label>
        </div>
        
        <div>
          <input 
              type="radio"
              id="3"
              name="css-text-wrap"
              value="overflow-wrap-anywhere"    
              onchange="changeHandler(this)"
           />
          <label for="3">overflow-wrap: anywhere</label>
        </div>
        
        <div>
          <input 
              id="4"
              type="radio" 
              name="css-text-wrap"
              value="word-break-break-all"    
              onchange="changeHandler(this)"
           />
          <label for="4">word-break: break-all</label>
        </div>
        
        <div>
          <input 
              id="5"
              type="radio" 
              name="css-text-wrap"
              value="word-break-break-word"    
              onchange="changeHandler(this)"
           />
          <label for="5">word-break: break-word</label>
        </div>
      </div>
      
    <p class="text default">
        The patient has been diagnosed with pneumonoultramicroscopicsilicovolcanoconiosis and will be taken into intensive care.
    </p>
  </div>
</body>
</html>
*{
  margin: 0;
  box-sizing: border-box;
}

label {
  font-size: 1.2em;
  color: white;
}

.container {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(50deg, #4d7dee, #eeb524);
}

.text {
  background: white;
  border-radius: 8px;
  width: 240px;
  padding: 10px; 
  font-size: 1.2em;
}

.default {
  overflow-wrap: normal;
}

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

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

.word-break-break-all {
  word-break: break-all;
}

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




const textContainer = document.querySelector(".text");

let checkedVal = "default";

function changeHandler(radio) {
  textContainer.classList.remove(checkedVal);
  textContainer.classList.add(radio.value);
  checkedVal = radio.value;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.