Расположить текст вертикально снизу вверх

@renat_dmitriev · Регистрация: 26.08.2016

Студворк — интернет-сервис помощи студентам

Почему-то простая вроде бы задача вызывает затруднения.

Есть таблица, в ней левая колонка, в каждой ячейке которой выводится зеленым номер строки а под ним нужно вывести вертикально мелким шрифтом дополнительную информацию. К сожалению использование

CSS
1
transform: rotate(-90deg);

не дает желаемого эффекта, надпись выводится вертикально, но разбивается на несколько строк по пробелам. Если же поставить неразрывные пробелы, то надпись залезает на номер строки, а не выводится под ним. Нужно видимо как-то поколдовать с дивами, чтобы вывести надпись строго под номером колонки. Буду очень благодарен за любые подсказки.

https://codepen.io/dimoff66/pen/oaGYWM

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id=app>
   <div class="left-numeric side cell">
      <div class="row">
         <div>
            <div class="table-number">1</div>
            <div class="vertical-caption">3 red, large</div>
         </div>
      </div>
      <div class="row">
         <div>
            <div class="table-number">2</div>
            <div class="vertical-caption">2*yellow,*medium</div>
         </div>
      </div>
   </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Вот этот элемент */
.vertical-caption {
   transform: rotate(-90deg);
}
 
#app{
   background-color: #3A3A3B;
   color: white;
   font-size: 8px;
   width: 100%;
   height: 100%;
}
 
.side{
   width: 20px;
   border-right: 1px solid yellow      
}
 
.row {
   height: 120px;
}
 
.table-number {
   font-size: 14px;
   color: green
}

Qwerty_Wasd · 14.10.2018, 15:24

renat_dmitriev, приветствую. Пока могу предложить такой вариант - https://codepen.io/qwerty_wasd/pen/KGXveO
Но!!!! - придется либо определить оптимальную высоту для контейнера с учетом самой длинной строки под номером, либо подбирать для каждой(стили отдельно в конце)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
  <div class="item-a">
    <div class="number">1</div>
  </div>
  <div class="item-b">
    <div class="vertical-text">3 red, large</div>
  </div>
  <div class="item-c"></div>
</div>
<div class="container">
  <div class="item-a">
    <div class="number">2</div>
  </div>
  <div class="item-b">
    <div class="vertical-text">2*yellow,*medium</div>
  </div>
  <div class="item-c"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.container {
  border: 1px solid #000;
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-template-rows: 25px 1fr;
  grid-template-areas: "number content" "description content";
  background: #3A3A3B;
}
.container > .item-a {
  border-right: 2px solid yellow;
  grid-area: number;
  text-align: center;
  color: green;
}
.container > .item-b {
  border-right: 2px solid yellow;
  position: relative;
  grid-area: description;
}
.container > .item-b > .vertical-text {
  position: absolute;
  right: 50%;
  top: 0;
  display: inline-block;
  -webkit-transform: rotate(-90deg) translatey(-50%);
          transform: rotate(-90deg) translatey(-50%);
  -webkit-transform-origin: right top 0;
          transform-origin: right top 0;
  white-space: nowrap;
  color: #ffffff;
  font-size: 8px;
}
.container > .item-c {
  grid-area: content;
}
/* Этот участок определяющий(либо одну высоту на всех, либо подбирайте) */
.container:nth-of-type(1) {
  min-height: 150px;
}
.container:nth-of-type(2) {
  min-height: 150px;
}

Хотя будет зависеть еще и от контента справа, если его объем достаточен, он будет держать высоту достаточную для того, чтобы строка под номером влезала. То есть - https://codepen.io/qwerty_wasd/pen/YJrrvg

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
  <div class="item-a">
    <div class="number">1</div>
  </div>
  <div class="item-b">
    <div class="vertical-text">3 red, large</div>
  </div>
  <div class="item-c">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="container">
  <div class="item-a">
    <div class="number">2</div>
  </div>
  <div class="item-b">
    <div class="vertical-text">2*yellow,*medium</div>
  </div>
  <div class="item-c">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.container {
  border: 1px solid #000;
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-template-rows: 25px 1fr;
  grid-template-areas: "number content" "description content";
  background: #3A3A3B;
}
.container > .item-a {
  border-right: 2px solid yellow;
  grid-area: number;
  text-align: center;
  color: green;
}
.container > .item-b {
  border-right: 2px solid yellow;
  position: relative;
  grid-area: description;
}
.container > .item-b > .vertical-text {
  position: absolute;
  right: 50%;
  top: 0;
  display: inline-block;
  -webkit-transform: rotate(-90deg) translatey(-50%);
          transform: rotate(-90deg) translatey(-50%);
  -webkit-transform-origin: right top 0;
          transform-origin: right top 0;
  white-space: nowrap;
  color: #ffffff;
  font-size: 8px;
}
.container > .item-c {
  grid-area: content;
}

@renat_dmitriev · 15.10.2018, 08:16 **[ТС]**

Qwerty_Wasd, Супер, все волшебно, огромное спасибо!

Qwerty_Wasd · 15.10.2018, 09:27

renat_dmitriev, не за что

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@renat_dmitriev 392 / 294 / 121 Регистрация: 26.08.2016 Сообщений: 902
	15.10.2018, 08:16 [ТС]
	Qwerty_Wasd, Супер, все волшебно, огромное спасибо! 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	15.10.2018, 09:27
	renat_dmitriev, не за что 0

Расположить текст вертикально снизу вверх

Решение