Блог

Главная - Вопросы по программированию - заполнить div фиксированного размера моноширинным шрифтом

заполнить div фиксированного размера моноширинным шрифтом

#javascript #html #css #fonts

#javascript #HTML #css #шрифты

Вопрос:

Представьте, что у вас есть строка символов и HTML-div-элемент фиксированного размера. Сколько символов строки поместилось бы в div (без переноса) при использовании моноширинного шрифта и заданного фиксированного размера шрифта? Бонус: как можно, наконец, слегка отрегулировать размер шрифта, чтобы текст действительно занимал всю ширину контейнера.

JS

 var s = "skjhfkjsdhjfksdhjkghskjgh...";

CSS 

 #c { width:267px; font-size:30px; font-family:monospace }

HTML 

 <div id="c"></div>

Посмотрите на эту скрипку для импровизированного подхода, который работает, но, я думаю, не такой чистый. Могут быть лучшие способы: https://jsfiddle.net/6et20853/1 /

Ответ №1:

Вам понадобится .getBoundingClientRect элемент, содержащий один моноширинный символ, чтобы получить ширину одного символа:

 oneCharWidth = document.querySelector('#testing').getBoundingClientRect().width;
console.log(oneCharWidth)  
 <span id="testing" style="font-family: monospace">a</span>

Если вы хотите проверить, какой размер шрифта позволит строке текста поместиться в контейнер фиксированного размера:

 var widthOfContainer = 400, // The width of the container in pixels
    textLength = "Hello world!".length, // The text to fit
    testElem = document.querySelector('#testing'),
    widthOfChar,
    fontSize = 100; // Our initial guess (must be exaggerated, otherwise optimal value won't be reached)

do {
  fontSize--;
  testElem.style.fontSize = fontSize   'px';
  widthOfChar = testElem.getBoundingClientRect().width;
} while (textLength * widthOfChar > widthOfContainer);

var container = document.querySelector('#container');
container.style.fontSize = fontSize   'px';

testElem.parentNode.removeChild(testElem); // Remove #testing element  
 #container {
  border: 1px solid red;
  font-family: monospace;
  width: 400px;
}

#testing {
  font-family: monospace;
}  
 <div id="container">Hello world!</div>
<span id="testing">a</span>