Блог

Главная - Вопросы по программированию - CSS Преобразует, но не переносит слова

CSS Преобразует, но не переносит слова

#css #css-transforms

Вопрос:

У меня есть DIV, который содержит текст, который преобразуется, но текст выходит за пределы DIV (синий). Как я могу повернуть текст, но обернуть и остаться внутри коробки?

 <div style="display: flex; background-color: lightblue; align-items: center; margin: 6in 1in 1in;">
   <span style="transform: rotate(90deg);   font-size: 12pt; text-align: center;">Blessings to you my Sister as you celebrate this milestone. Love and light, Eva </span>
</div>

введите описание изображения здесь

Ответ №1:

Попробуйте CSS writing-mode . Это делает так, что изменяется только текст, а не весь элемент.

 <div
      style="
        display: flex;
        background-color: lightblue;
        align-items: center;
        justify-content: center;
        margin: 1in 1in 1in;
      "
    >
      <span
        style="writing-mode: vertical-rl; font-size: 12pt; text-align: center;"
        >Blessings to you my Sister as you celebrate this milestone. Love and
        light, Eva
      </span>
    </div>

Комментарии:

1. Я бы никогда не подумал об этом, блестяще. Спасибо

Ответ №2:

     <div class="box">
            <div class="text">
                <p>Blessings to you my Sister
                    as you celebrate this milestone.
                    Love and light, Eva </p>
            </div>
        </div>
<style>
body {
  background-color: yellow;
  display: flex;
}

.box {
  background-color: lightblue;
  margin: 4in;
  transform: rotate(90deg);
  align-items: center;
}

</style>
Метки: ,