Текст во всю ширину родительского элемента

Пример:

Текст

во всю ширину

родительского элемента

HTML:

<div class="width-text">Текст</div>
<div class="width-text">во всю ширину</div>
<div class="width-text">родительского элемента</div>

<div class="width-text">Текст</div>

<div class="width-text">во всю ширину</div>

<div class="width-text">родительского элемента</div>

CSS:

.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;
}

.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:

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();

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. При его изменении, их нужно будет подкорректировать.

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: