392 / 294 / 121
Регистрация: 26.08.2016
Сообщений: 902
1

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

14.10.2018, 09:41. Показов 7001. Ответов 3
Метки нет (Все метки)

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

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

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
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.10.2018, 09:41
Ответы с готовыми решениями:

Как расположить текст вертикально по центру к <label>?
Есть стилизованный переключатель, мне нужно отцентровать текст по вертикали, кто подскажет как это...

Расширение снизу вверх
Всем привет! Есть код &lt;style&gt; .pers_life_center { position: absolute; width: 31px; ...

Расположить вертикально блоки
Добрый день ув. пользователи ! Подскажите пожалуйста, если есть допустим книга, автор, описание....

Расположить фигуры вертикально в ряд
Доброго времени суток! Подскажите, пожалуйста, как можно сделать три вертикальных столбца из фигур...

3
dev - investigator
Эксперт JSЭксперт HTML/CSS
2148 / 1493 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
14.10.2018, 15:24 2
Лучший ответ Сообщение было отмечено renat_dmitriev как решение

Решение

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;
}
0
392 / 294 / 121
Регистрация: 26.08.2016
Сообщений: 902
15.10.2018, 08:16  [ТС] 3
Qwerty_Wasd, Супер, все волшебно, огромное спасибо!
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2148 / 1493 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
15.10.2018, 09:27 4
renat_dmitriev, не за что
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.10.2018, 09:27
Помогаю со студенческими работами здесь

Bootstrap 4. Расположить элементы вертикально
Добрый день! Ребят, как сделать средствами Bootstrap 4 задумку. Есть блок, равен высоте экрана, в...

Как расположить картинки вертикально ?
Привет всем. Есть сайт (не реклама) Как сделать что бы картинки располагались в ряд ?...

Как расположить вертикально два блока?
Как расположить эти два блока один под одним, чтобы надпись была у левого края? Как будто...

Отображение текста вертикально снизу вверх
Добрый день. Подскажите, пожалуйста, как в Access97 представить label или textbox 'развернутым'...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru