CSS white-space Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  color: #222;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.item h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.box {
  border: 1px solid #ddd;
  padding: 12px;
  min-height: 80px;
  background: #fafafa;
  font-size: 14px;
  line-height: 1.4;
}

.ws-normal {
  white-space: normal;
}

.ws-nowrap {
  white-space: nowrap;
  overflow: auto;
}

.ws-pre {
  white-space: pre;
}

.ws-prewrap {
  white-space: pre-wrap;
}

.ws-preline {
  white-space: pre-line;
}
</style></head><body><div class='container'>
  <h2>CSS white-space examples</h2>
  <div class='grid'>
    <div class='item'>
      <h3>normal</h3>
      <div class='box ws-normal'>
        This    is    an    example    with    multiple    spaces. Line breaks
        are shown as a single space and long-words break: Supercalifragilisticexpialidocious
      </div>
    </div>

    <div class='item'>
      <h3>nowrap</h3>
      <div class='box ws-nowrap'>
        This    is    an    example    with    multiple    spaces. Line breaks
        are not wrapped; the long-words won't break: Supercalifragilisticexpialidocious
      </div>
    </div>

    <div class='item'>
      <h3>pre</h3>
      <pre class='box ws-pre'>
This    is    an    example    with    multiple    spaces. Line breaks
are preserved exactly.
        Indentation is preserved too.
      </pre>
    </div>

    <div class='item'>
      <h3>pre-wrap</h3>
      <div class='box ws-prewrap'>
        This    is    an    example    with    multiple    spaces. Line breaks
        are preserved and text will wrap when needed: Supercalifragilisticexpialidocious
      </div>
    </div>

    <div class='item'>
      <h3>pre-line</h3>
      <div class='box ws-preline'>
        This    is    an    example    with    multiple    spaces. Line breaks
        are preserved, but multiple spaces are collapsed.
      </div>
    </div>
  </div>
</div></body></html>