Выровнять текстовую линию по основанию элемента div - PullRequest
Новая
       48

Выровнять текстовую линию по основанию элемента div

0 голосов
/ 27 октября 2019

Я пытаюсь выровнять базовую линию некоторого текста в div по самому нижнему краю указанного div (так, чтобы такие символы, как g и j фактически переполняли быdiv)

Я могу только выровнять нижний край текстового элемента по нижнему краю div. Я пытался использовать vertical-align со значениями baseline и bottom на внутреннем и внешнем элементе, но безуспешно. 

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}
<div>
  <span>
  TEST gjp ABC
  </span>
</div>

Я также хочу иметь возможность смещение базовой линии от нижней части div (например, bottom: 10px; позиционирует базовую линиюtext 10px от нижнего края элемента div).

Edit: Следует также упомянуть, что я хочу сохранить свойство position: absolute; в spanэлемент, потому что я хочу свободно размещать несколько из них в родительском div.

Например, здесь базовая линия A должна быть у нижнего края div, B должен быть 10px над ним и C s 20px : 

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}
<div>
  <span style="left: 0px; bottom: 0px;">
  A
  </span>
  <span style="left: 50px; bottom: 10px;">
  B
  </span>
  <span style="left: 100px; bottom: 20px;">
  C
  </span>
</div>

Ответы [ 3 ]

2 голосов
/ 27 октября 2019

Добавьте ::before псевдоэлемент с высотой 100% и display: inline-block; и используйте его для вертикального выравнивания <span> с базовой линией: 

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

div::before {
  display: inline-block;
  height: 100%;
  content: '';
}

span {
  font-size: 30px;
  vertical-align: baseline;
}
<div>
  <span>TEST gjp ABC</span>
</div>

Вы можете применить ту же идею к самому диапазону, но вам нужно будет указать высоту диапазона: 

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  display: inline-block;
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1em;
  background: red;
}

span::before {
  display: inline-block;  
  height: 100%;
  vertical-align: baseline;
  content: '';
}
<div>
  <span style="left: 0px; bottom: 0px;">gjp</span>
  <span style="left: 50px; bottom: 10px;">gjp</span>
  <span style="left: 100px; bottom: 20px;">gjp</span>
</div>
0 голосов
/ 27 октября 2019

Сделайте интервал с line-height равным 0, затем рассмотрите скрытый символ, который будет управлять выравниванием. Вам может потребоваться изменить значение в зависимости от используемого шрифта: 

.container {
  height: 80px;
  width: 400px;
  background: #ff5;
  position: relative;
}

.container>span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
}

.container>span:before {
  content: "\200B";
  vertical-align: -0.35em;/* Adjust this */
}
<div class="container">
  <span>TEST gjp ABC</span>
  <span style="font-family:arial;right:0;left:auto;font-size:20px">TEST gjp ABC</span>
</div>

Вы также можете просто рассмотреть перевод: 

.container {
  height: 80px;
  width: 400px;
  background: #ff5;
  position: relative;
}

.container>span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
  transform: translateY(-0.35em);
}
<div class="container">
  <span>TEST gjp ABC</span>
  <span style="font-family:arial;right:0;left:auto;font-size:20px">TEST gjp ABC</span>
</div>
0 голосов
/ 27 октября 2019

Вы также можете уменьшить высоту строки до 0,8em, чтобы текст переполнял диапазон. 

<div style="height: 80px; width: 300px; background: #ff5; position: relative;">
	<span style="font-size: 30px; position: absolute; left:0; bottom:0;line-height:0.8em;">
		TEST gjp ABC
	</span>
</div>
...