<div class="block">
<div class="block__title">Заголовок</div>
<p class="block__description">
<span class="block__description-line">Lorem ipsum dolor</span>
<span class="block__description-line">sit amet.</span>
</p>
</div>
body {
font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}
.block {
width: fit-content;
&__title {
margin: 0;
padding: 16px;
border: 2px solid #333333;
text-transform: uppercase;
font-size: 32px;
line-height: 1;
}
&__description {
width: max-content;
margin: 0;
padding: 16px 0;
line-height: 1;
font-size: calc(1rem * var(--scale, 1));
&-line {
display: block;
}
}
}
.hidden {
visibility: hidden;
}
View Compiled
const poster = (selectors, useObserver = false) => new Promise(resolve => {
const updateScale = element => {
element.style.setProperty('--scale', 1);
const { width: parentWidth } = element.parentNode.getBoundingClientRect();
const { width: elementWidth } = element.getBoundingClientRect();
const scale = parentWidth / elementWidth;
element.style.setProperty('--scale', scale);
};
const updateElements = () => {
const parents = document.querySelectorAll(selectors.parent);
for (const parent of parents) {
parent.classList.add('hidden');
const elements = parent.querySelectorAll(selectors.element);
for (const element of elements) {
updateScale(element);
}
parent.classList.remove('hidden');
}
};
if (useObserver) {
const observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
updateScale(mutation.target);
}
});
const parents = document.querySelectorAll(selectors.parent);
for (const parent of parents) {
const elements = parent.querySelectorAll(selectors.element);
for (const element of elements) {
observer.observe(element, {
childList: true
});
}
}
}
window.addEventListener('resize', updateElements);
updateElements();
resolve();
});
poster({
parent: '.block',
element: '.block__description'
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.