Есть ли способ CSS или способ без перекомпоновки минимизировать ширину элемента (без увеличения высоты)? ⇐ CSS

[Anonymous]

Ниже приведена фотография iMessage, извините, она немного великовата. На изображении вы увидите, что разные многострочные сообщения имеют разную ширину. Фактически, каждый из них оптимизирован для минимальной ширины без создания новой строки.

[img]https://i .sstatic.net/PDfFs.png[/img]


Ниже приведен код, который достигает этого эффекта очень медленно.

Код: Выделить всё

// finds the minimum width an element can be without becoming taller
function minimizeWidth(domNode) {
if (domNode.offsetWidth < 160) { return; }
const squinchFurther = () => {
const startHeight = domNode.offsetHeight;
const startWidth = domNode.offsetWidth;
if (startWidth === 0) {
return;
}

domNode.style.width = (startWidth - 1) + "px";
// wait for reflow before checking new size
requestAnimationFrame(() => requestAnimationFrame(() => {
// if the height has been increased, go back
if (domNode.offsetHeight !== startHeight) {
domNode.style.width = startWidth + "px";
} else {
squinchFurther();
}
}));
}
requestAnimationFrame(() => requestAnimationFrame(squinchFurther));
}

const divs = document.querySelectorAll("div");
for (let i = 0; i < divs.length; i++) {
minimizeWidth(divs[i]);
}

Код: Выделить всё

div {
box-sizing: border-box;
display: inline-block;
max-width: 160px;
padding: 5px;
border-radius: 5px;
margin: 10px;
background: #08F;
color: white;
}

Код: Выделить всё

Here's some multi line text

Word

Crux case a a a a a a a a

Есть ли CSS, который сделает это автоматически? Если нет, то есть ли способ вычислить его в JS, не дожидаясь перекомпоновки?

Я помню, как однажды видел что-то о «Reflow Worker», которое можно было бы закодировать с помощью WASM, но сейчас я ничего об этом не могу найти. Если кто-нибудь знает, о чем я говорю, поделитесь ссылкой.

Подробнее здесь: https://stackoverflow.com/questions/534 ... element-wi