Při tvorbě jednoho webu jsem se setkal s potřebou formátovat tok textu dynamicky. Text měl být v jednom sloupci na půlku stránky s tím, že pokud by délka textu překročila určitou hranici, text by se rozdělil do dvou sloupců na celou šířku stránky. Udělal jsem to takto:
Takto vypadá HTML
<div id="text-block"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aenean vel massa quis mauris vehicula lacinia.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Aliquam erat volutpat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aenean vel massa quis mauris vehicula lacinia.</p> </div>
Zde je CSS:
#text-block {
width: 50%;
column-count: 1; /* Výchozí: 1 sloupec */
column-gap: 20px;
line-height: 1.6;
}
#text-block.two-columns {
width: 100%;
column-count: 2; /* Když je třída 'two-columns', použij dva sloupce */
}
A tady je ovládací JS:
window.onload = function() {
var textBlock = document.getElementById('text-block');
var textLength = textBlock.textContent.length; // Získáme délku textu
// Podle délky textu přidáme nebo odstraníme třídu pro 2 sloupce
if (textLength > 300) { // Pokud je text delší než 300 znaků
textBlock.classList.add('two-columns');
} else {
textBlock.classList.remove('two-columns');
}
};