Как растянуть по ширине одну строку текста, например заголовок, не используя text-align-last?

160

20 декабря 2019, 22:20

Можно использовать text-align-last, но он много где не работает. Можно было бы сделать вот так

.text{
  text-align: justify;
}
.text::after{
  content: '';
  display: inline-block;
  width: 100%;
}

Но блок получается слишком высоким, из-за line-height блока after и не становится меньше, если на нем это свойство ручками задать. Вижу выход в задании фиксированной высоты блоку text. Но ощущаю, что стою на костылях. Можно это сделать как-то по-красивее?

Answer 1

Если нужно, чтобы на любых размерах экрана заголовок был растянут во всю ширину, можно задать font-size в единицах измерения vw:

h1 { 
  text-transform: uppercase; 
  text-align: center; 
  font-size: 5vw; 
}

<h1>какой-то заголовок тут висит</h1>

Answer 2

Кажется я упоролся..

$('.head-text').each(function(){ 
  WinHeader($(this)); 
}); 
 
function WinHeader(el){ 
  let text_arr = el.text().split(''), 
      text_len = text_arr.length; 
 
  el.empty(); 
  el.css('font-size', `calc(100vw / ${text_len})`); 
 
  for(let i = 0; i<text_len; i++){ 
    el.append(`<div>${text_arr[i] === ' ' ? '&nbsp;' : text_arr[i]}</div>`); 
  } 
}

.head-text { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: space-between; 
  text-transform: uppercase; 
} 
 
.head-text > div { 
  width: 100%; 
  text-align: center; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="head-text">Какой-то широкий заголовок</div> 
 
<div class="head-text">Короткий заголовок</div> 
 
<div class="head-text">Ваще</div>