Вертикальный текст: слова, которые говорят сверху вниз!

Создайте уникальный вертикальный текст для вашего сайта или проекта!

Этот стильный и адаптивный дизайн позволяет преобразовать любое предложение в вертикальные столбцы.

See the Pen Вертикальные слова by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вертикальные слова</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="vertical-words-container"></div>
 
    <!-- Ссылка на автора -->
    <div class="author-link">
        <a href="https://satamax.ru" target="_blank">SATAMAX.RU</a>
    </div>
 
    <script src="script.js"></script>
</body>
</html>

        CSS
 
  
  Показать код CSS
  
         
/* Основной контейнер */
#vertical-words-container {
    display: flex; /* Располагаем столбцы горизонтально */
    justify-content: center; /* Выравнивание по центру */
    align-items: flex-start; /* Сверху вниз */
    gap: 20px; /* Расстояние между столбцами */
    margin-top: 50px;
}
 
/* Столбец для одного слова */
.vertical-column {
    display: flex;
    flex-direction: column; /* Располагаем буквы вертикально */
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
 
/* Ссылка на автора */
.author-link {
    margin-top: 30px;
    text-align: center;
}
 
.author-link a {
    text-decoration: none;
    color: #555;
    font-size: 18px;
}
 
/* Автор кода: SATAMAX.RU [https://satamax.ru] */

        JS
       

  
  Показать код JS
  
    
       // Исходный текст
const text = "Пример текста для вертикального отображения";
 
// Функция для отображения слов сверху вниз
function createVerticalWords(input) {
    const container = document.getElementById("vertical-words-container");
    container.innerHTML = ""; // Очистка контейнера
 
    const words = input.split(" "); // Разделяем текст на слова
 
    words.forEach(word => {
        const column = document.createElement("div"); // Создаем столбец для каждого слова
        column.className = "vertical-column";
 
        // Создаем отдельные буквы и добавляем в столбец
        for (let char of word) {
            const letter = document.createElement("span");
            letter.textContent = char;
            column.appendChild(letter);
        }
 
        container.appendChild(column); // Добавляем столбец в контейнер
    });
}
 
// Вызываем функцию с текстом
createVerticalWords(text);
 
/* Автор кода: SATAMAX.RU [https://satamax.ru] */