#html #css #text
#HTML #css #текст
Вопрос:
Я пытаюсь создать веб-страницу с большим количеством элементов div, позиции и размер которых создаются отдельно. Далее, я хочу вставить текст в эти элементы, поэтому я использую JS для помещения текста во innerHTML. Есть ли способ, с помощью которого я могу повернуть только текст на 90 градусов (а не сам div, поскольку я не хочу изменять положение и ориентацию элементов div?
Я попробовал -webkit-transform: повернуть (-90 градусов); -moz-transform: поворот(-90 градусов); в CSS, но все они поворачивают сами divs, а не только текст.
Есть идеи, возможно ли это.
Спасибо!
Комментарии:
1. Взгляните на эту ссылку: snook.ca/archives/html_and_css/css-text-rotation Похоже, вам нужно выполнить hax для разных браузеров… Возможно, у CSS3 есть лучшее решение.
2. Спасибо, я пробовал это, но именно здесь у меня возникла идея преобразования webkit / moz. Но они поворачивают весь div вместо текста.
Ответ №1:
Я этого не пробовал, но почему бы не добавить дополнительный элемент <div> между вашим текущим <div> текстом и вашим текстом с прозрачным фоном? Затем вы можете повернуть это <div> .
Комментарии:
1. Да .. это звучит разумно. Это был бы мой путь грубой силы, если бы не было чего-то более простого 🙂
Ответ №2:
Заключите текст в интервал и установите для него значение inline-block. Обратите внимание, что родительский div не поворачивается вместе с текстом.
<div class="roundedOne">
<span class="rotate">TEXT</span>
</div>
.rotate {
display: inline-block;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
.roundedOne {
background: red;
}
CODEPEN
Ответ №3:
поскольку преобразование поворачивает весь раздел div, вы можете установить высоту и ширину div, содержащего текст, а затем преобразовать его.