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

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

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

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

CSS

1	transform: rotate(-90deg);

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

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

HTML5

<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

/* Вот этот элемент */
.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

<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

*,
*: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

<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

*,
*: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, не за что

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

@Qwerty_Wasd dev - investigator 2148 / 1493 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	15.10.2018, 09:27	4
	renat_dmitriev, не за что 0

Опции темы

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

Решение