Изменение направления текста, чтобы он отображался снизу вверх - Слияние

#html #css

#HTML #css

Вопрос:

Я работаю над обновлением статей kb для одного из моих клиентов, и из-за ограничений администратора на портале я не могу использовать предопределенные макросы.

Я использовал css и html для изменения направления текста, но в результате он идет сверху вниз, что противоположно тому, что я ожидал.

Как мне это изменить? 🙂

Спасибо

 th { vertical-align: bottom; text-align: center; } th span { -ms-writing-mode: tb-rl; -webkit- 
    writing-mode: vertical-tb; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

 <table>
<tr>
  <th><span>Project Sponsor</span></th>
</tr>
</table>

Это то, что я вижу сейчас, но я хочу, чтобы оно было в противоположном направлении, снизу вверх

1. Можете ли вы прикрепить изображение результата, которое вы хотите?

2. Да, добавлено то, как это выглядит в настоящее время. Допустим, текст идет сверху вниз, я хочу, чтобы каждое предложение начиналось внизу таблицы

3. С вашим кодом я просто указываю высоту таблицы в CSS и получаю то, что вы хотите

Ответ №1:

Если вы измените поворот с 180 градусов (текст снизу вверх) на 0 градусов, вы получите текст сверху вниз

 th { vertical-align: bottom; text-align: center; } th span { -ms-writing-mode: tb-rl; -webkit- 
    writing-mode: vertical-tb; writing-mode: vertical-rl; transform: rotate(0deg); white-space: nowrap; }

 <table>
<tr>
  <th><span>Project Sponsor</span></th>
</tr>
</table>

Или чтобы получить текст, который начинается снизу, поместите или измените свойство height в вашем CSS из table

Ответ №2:

Измените высоту главной article таблицы, и она будет отображаться снизу вверх.

 th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-tb;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

table {
height: 100vh;
}

 <table>
<tr>
  <th><span>Project Sponsor</span></th>
</tr>
</table>