CSS column-width — ширина колонки тексту

HTML

<div class="cols">Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

CSS

.cols {
    column-width: 100px;
}

HTML

<p>Вибери потрібне значення для <code>column-width</code>:</p>

<input type="number" id="val" placeholder="ширина" value="50" min="0">px

<hr>
<span>Ця властивість визначає мінімальну ширину стовпця. Кількість стовпчиків буде максимальною кількістю стовпців, які можуть вміститися у контейнер, без стовпця, що має ширину менше, ніж значення column-width​. Фактична ширина стовпчика може бути меншою, ніж значення ширини стовпчика, якщо ширина контейнера менша.</span>
<div id="block">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit quis corporis, odio recusandae velit praesentium consequuntur fugiat necessitatibus veritatis ipsum reiciendis voluptatum accusamus totam iste eius voluptatibus magni quia blanditiis.</p>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

p {
  margin-top: 0;
}

.inputs {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  background: #f1f1f1;
  padding: 10px;
  transition: column-width .15s ease-in;
  
  -webkit-column-rule-width: 1px;
     -moz-column-rule-width: 1px; 
          column-rule-width: 1px;

  -webkit-column-rule-color: gold;
     -moz-column-rule-color: gold;
          column-rule-color: gold;
  
  -webkit-column-rule-style: solid;
     -moz-column-rule-style: solid;
          column-rule-style: solid;
  
  -webkit-column-width: 50px;
     -moz-column-width: 50px; 
          column-width: 50px;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

JS

document.querySelectorAll('#val').forEach((el) => el.addEventListener('change', function () {
  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');
  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('column-width', this.value + 'px'));
}));

HTML

<div class="cols narrow">
    <p>Контейнер завширшки 320 пікселів: влазять дві колонки.</p>
    <p>Текст перетікає з колонки в колонку сам, поки не закінчиться.</p>
</div>
<div class="cols">
    <p>Контейнер на всю доступну ширину: колонок більше, і кожна ширша за 140 пікселів, бо залишок ділиться між ними.</p>
    <p>Саме тому значення читають як «не вужче ніж», а не як точний розмір колонки.</p>
</div>

CSS

.cols {
    column-width: 140px;
    column-gap: 20px;
    column-rule: 1px dashed #999;
    padding: 8px;
    margin-bottom: 14px;
    border: 1px solid #999;
    font: 13px/1.5 sans-serif;
}

.cols p {
    margin: 0 0 8px;
}

.narrow {
    width: 320px;
}

HTML

<span>Це контейнер з багатоколонковим текстом. Властивість <code>column-width</code> має значення за замовчуванням: auto. Властивість <code>column-count</code> не задана!</span>
<div class="multicol">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione necessitatibus sed, cumque sit nemo delectus voluptate asperiores modi ut alias!</p>
</div>

<span>Це контейнер з багатоколонковим текстом. Властивість <code>column-width</code> має значення: 70px. Властивість <code>column-count</code> знову ж таки не задана!</span>
<div class="multicol rule">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis sit iusto architecto! Culpa, possimus voluptatum sint officiis nesciunt amet consequatur.</p>
</div>

CSS

body {
  font-family: sans-serif;
  line-height: 1.45;
}

p {
  margin-top: 0;
}

.multicol {
  background: #eee;
  padding: 10px;
  margin-bottom: 16px;

  -webkit-column-rule: 2px dotted gold;
     -moz-column-rule: 2px dotted gold;
          column-rule: 2px dotted gold;

  -webkit-column-width: auto; /* Safari and Chrome */
     -moz-column-width: auto; /* Firefox */
          column-width: auto; /* CSS3 */
}

.multicol.rule {
  -webkit-column-width: 70px; /* Safari and Chrome */
     -moz-column-width: 70px; /* Firefox */
          column-width: 70px; /* CSS3 */
}