Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
renat_dmitriev
219 / 208 / 89
Регистрация: 26.08.2016
Сообщений: 685
1

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

14.10.2018, 09:41. Просмотров 806. Ответов 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)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.10.2018, 09:41
Ответы с готовыми решениями:

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

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

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

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

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

3
Qwerty_Wasd
970 / 718 / 365
Регистрация: 16.04.2016
Сообщений: 1,943
Завершенные тесты: 2
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
renat_dmitriev
219 / 208 / 89
Регистрация: 26.08.2016
Сообщений: 685
15.10.2018, 08:16  [ТС] 3
Qwerty_Wasd, Супер, все волшебно, огромное спасибо!
0
Qwerty_Wasd
970 / 718 / 365
Регистрация: 16.04.2016
Сообщений: 1,943
Завершенные тесты: 2
15.10.2018, 09:27 4
renat_dmitriev, не за что
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.10.2018, 09:27

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

Центрировать текст вертикально
Как поместить &quot;Меню&quot; в центр фиолетового блока? А так же убрать отступы у фиолетового блока сверху...

HTML текст вертикально
Можно ли такое реализовать? Если да, то подскажите как


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru