Вертикальный текст в HTML-таблице: как повернуть на 90 градусов
Быстрый ответ
Для установки вертикального расположения текста примените к div
внутри ячейки таблицы CSS-свойство transform: rotate(-90deg);
.
<td><div style="transform: rotate(-90deg); white-space: nowrap;">Вертикальный текст</div></td>
С помощью transform: rotate(-90deg);
текст поворачивается на 90 градусов против часовой стрелки, что особенно удобно для узких столбцов заголовков. Свойство white-space: nowrap;
предотвращает перенос текста, позволяя ему сохраняться в одной строке.
Добавьте вендорные префиксы для обеспечения наилучшей совместимости:
.box_rotate {
-webkit-transform: rotate(-90deg); /* Для Safari */
-ms-transform: rotate(-90deg); /* Для IE 9 */
transform: rotate(-90deg); /* Для прочих браузеров */
}
Чтобы применить эти стили, назначьте класс .box_rotate
соответствующим div
.
<td>
<div class="box_rotate">Вертикальный текст</div>
</td>
Проверьте читаемость текста в различных браузерах и адаптируйте длину заголовков под дизайн вашего сайта.
Применение поворота к тексту заголовков
Для поворота текста заголовков применяется уже упомянутый класс .box_rotate
.
<th>
<div class="box_rotate" aria-label="Вертикальный текст заголовка">
Текст заголовка
</div>
</th>
Управление длинным текстом
При работе с длинными словами возможны следующие варианты:
- Применение сокращений: иногда можно передать суть с помощью части слова или аббревиатуры.
- Уменьшение шрифта: иногда требуется уменьшить шрифт, чтобы текст поместился в указанном пространстве.
- Корректировка угла поворота: если подходят углы в -45 или -60 градусов, используйте эти настройки, чтобы сбалансировать читабельность и внешний вид.
Фокус на доступности
Создайте HTML таким образом, чтобы он был доступен для вспомогательных технологий и программ для чтения с экрана.
<th>
<div class="box_rotate" aria-label="Описание для экранных читалок">
Аббревиатура
</div>
</th>
Качественное оформление визуально привлекательно и способствует передаче смысла.
Визуализация
Демонстрация преобразования стандартного горизонтального расположения текста в вертикальное:
До поворота: | Содержимое |
|------------|
| Вещи |
После поворота: ┌─────┐
| С |
| о |
| д |
| е |
| р |
| ж |
| и |
└─────┘
Таким образом, мы движемся вверх по вертикали, следуя за каждой буквой текста.
Адаптация для мобильных устройств
Дизайн должен быть максимально адаптирован для удобства использования на маленьких экранах.
- Медиа-запросы: применяйте поворот текста только там, где это уместно, например, на больших экранах.
- Резиновые размеры: адаптируйте свойства элементов под различные размеры экранов.
@media (min-width: 768px) {
.box_rotate {
transform: rotate(-90deg); /* Поворот текста на экранах шире 768px */
}
}
Профилактика и решение проблем
Ниже представлены советы по решению типичных проблем при стилизации текста.
- Выравнивание: если текст не выглядит правильно, отрегулируйте его с помощью свойств
text-align
иvertical-align
. - Перекрытие: если элементы начинают перекрывать друг друга, попробуйте увеличить отступы вокруг текста или уменьшить размер шрифта.
- Стиль ховера: контролируйте эффекты при наведении курсора, чтобы они не вызывали нежелательные изменения в отображении повернутых элементов.
Проводите тестирование изменений, чтобы убедиться, что функциональность и визуальное оформление согласуются между собой.
Полезные материалы
- transform – CSS: Каскадные таблицы стилей | MDN — детально рассматривает свойство transform на MDN.
- Свойство CSS transform — W3Schools объясняет основы работы со свойством transform.
- Flask – POST Error 405 Method Not Allowed – Stack Overflow — обсуждение проблемы и возможные решения на Stack Overflow.
- "transform" | Can I use... Support tables for HTML5, CSS3, etc — информация о совместимости свойства transform в различных браузерах.
- Адаптивные повернутые заголовки таблиц с использованием CSS — пример на CodePen, демонстрирующий адаптивные заголовки.
- Повернутые заголовки таблиц с использованием CSS-переходов — еще один пример на CodePen, показывающий применение CSS-переходов.