Как растянуть текст по ширине блока?

307

21 июня 2018, 20:20

Каким образом можно решить такую задачу?

Есть несколько div в которых лежат 2 текстовые строки "p". Текст в эти строки подставляется динамически пользователем при вводе в input. Шрифт у текста в каждом блоке разный. Размер шрифта в первой строке 25px, в нижней 20.

Как сделать так, чтобы ширина текста была одинаковой, но при этом font-size второй строки был всегда меньше размера первой?

https://gyazo.com/585a1b62e7338b2f8464c989c18661c2

Answer 1

Есть 2 разных способа решения вашей задачи: через SVG и JavaScript.

Через SVG (решение #1):

.wrapper { 
  width: 500px; 
  background-color: blue; 
  height: 125px; 
} 
 
svg { 
  width: 100%; 
  height: 100% 
} 
 
text { 
  font-family: Helvetica 
} 
 
.name { 
  font-size: 25px 
} 
 
.desc { 
  font-size: 20px 
}

<div class="wrapper"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <text class="name" x="10" y="50" textLength="480" lengthAdjust="spacingAndGlyphs">Есть несколько div</text> 
    <text class="desc" x="10" y="80" textLength="480" lengthAdjust="spacingAndGlyphs">текст в эти строки подставляется</text> 
  </svg> 
</div>

Через SVG (решение #2):

.wrapper { 
  width: 500px; 
  background-color: blue; 
  height: 125px; 
} 
 
svg { 
  width: 100%; 
  height: 100% 
} 
 
text { 
  font-family: Helvetica 
} 
 
.name { 
  font-size: 25px 
} 
 
.desc { 
  font-size: 20px 
}

<div class="wrapper"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <text class="name" x="10" y="50" textLength="480" lengthAdjust="spacing">Есть несколько div</text> 
    <text class="desc" x="10" y="80" textLength="480" lengthAdjust="spacing">текст в эти строки подставляется</text> 
  </svg> 
</div>

Через JavaScript:

$.fn.strech_text = function() { 
  var elmt = $(this), 
    cont_width = elmt.width(), 
    txt = elmt.html(), 
    one_line = $('<span class="stretch_it">' + txt + '</span>'), 
    nb_char = elmt.text().length, 
    spacing = cont_width / nb_char, 
    txt_width; 
 
  elmt.html(one_line); 
  txt_width = one_line.width(); 
 
  if (txt_width < cont_width) { 
    var char_width = txt_width / nb_char, 
      ltr_spacing = spacing - char_width + (spacing - char_width) / nb_char; 
 
    one_line.css({ 
      'letter-spacing': ltr_spacing 
    }); 
  } else { 
    one_line.contents().unwrap(); 
    elmt.addClass('justify'); 
  } 
}; 
 
$(document).ready(function() { 
  $('.stretch').each(function() { 
    $(this).strech_text(); 
  }); 
});

div { 
  width: 500px; 
  height: 125px; 
  vertical-align: middle; 
  padding: 50px 10px; 
  background-color: blue 
} 
 
.stretch_it { 
  white-space: nowrap 
} 
 
.justify { 
  text-align: justify 
} 
 
p { 
  margin: 7px 0; 
  font-family: Helvetica 
} 
 
.name { 
  font-size: 25px 
} 
 
.desc { 
  font-size: 20px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
  <p class="stretch name">Есть несколько div</p> 
  <p class="stretch desc">текст в эти строки подставляется</p> 
</div>

Answer 2

function setSpText(e) { 
  const el = (e instanceof Event) ? e.target : e;  
  let value = el.value,  
      outP  = document.querySelector(el.dataset.output || ''); 
  if (outP) 
    value = (value.split('')).map(chr => `<span>${chr}</span>`).join('');  
  outP.innerHTML = value;  
} 
 
document.addEventListener('DOMContentLoaded', () => { 
  for (let inp of document.querySelectorAll('.usertext')) { 
    inp.addEventListener('input', setSpText);  
    setSpText(inp);  
  } 
});

.test { 
  width: 400px; margin: 1em auto; 
  border: 1px dashed #ccc;  
} 
 
.line { 
  display: flex; flex-wrap: nowrap;  
  justify-content: space-between;  
  margin: 0;  
} 
.line.first  { font: 25px monospace; } 
.line.second { font: 20px sans-serif; } 
 
.line > span { flex: 0 0 auto; }

<div class="test"> 
  <p class="line first"></p> 
  <p class="line second"></p> 
</div> 
 
<input id="inp-first" class="usertext" data-output=".first" maxlength="20" value="Текст первой строки"><br> 
<input id="inp-second" class="usertext" data-output=".second" maxlength="30" value="Мелкий текст второй строки">