Пример:
Текст
во всю ширину
родительского элемента
HTML:
|
1 2 3 |
<div class="width-text">Текст</div> <div class="width-text">во всю ширину</div> <div class="width-text">родительского элемента</div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 |
.width-text { display: flex; justify-content: space-between; } .width-text span { color: #337AB7; font-family: 'Roboto', sans-serif; line-height: 1.1; font-weight: bold; text-transform: uppercase; } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 |
function resize() { let text = document.getElementsByClassName('width-text'); for (let i=0; i<text.length; i++) { let string = text[i].innerHTML; // Получаем текст строки string = string.replace(/<[^>]+>/g,''); // Удаляем из нее все теги text[i].style.fontSize = (text[i].offsetWidth / string.length * 1.4).toFixed() + "px"; // Устанавливаем размер шрифта, в зависимости от ширины строки и кол-ва букв text[i].innerHTML = string.replace(/(.)/g, '<span style="min-width: '+ (text[i].offsetWidth / string.length / 1.4).toFixed() +'px">$1</span>'); // Добавляем к буквам тег span для выравнивания } } window.addEventListener("resize", resize); resize(); |
Размеры букв и минимальная ширина их ячеек, которая используется для пробелов, рассчитаны для шрифта Roboto. При его изменении, их нужно будет подкорректировать.
Добавить комментарий: