Gibt es eine CSS- oder nicht umfließende Möglichkeit, die Breite eines Elements zu minimieren (ohne die Höhe zu erhöhen) ⇐ CSS

[Guest]

Unten ist ein Foto von iMessage, leider ist es etwas übergroß. Im Bild sehen Sie, dass verschiedene mehrzeilige Nachrichten unterschiedliche Breiten haben. Tatsächlich scheint jedes für minimale Breite optimiert zu sein, ohne dass eine neue Zeile erstellt wird.

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


Das Folgende ist ein Code, der diesen Effekt sehr langsam erreicht.

Code: Select all

// 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]);
}

Code: Select all

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

Code: Select all

Here's some multi line text

Word

Crux case a a a a a a a a

Gibt es ein CSS, das dies erledigt? automatisch? Wenn nicht, gibt es eine Möglichkeit, es in JS zu berechnen, ohne auf Reflows warten zu müssen?

Ich erinnere mich, dass ich einmal etwas über einen „Reflow Worker“ gesehen habe könnte mit WASM codiert werden, aber ich kann momentan nichts darauf finden. Wenn jemand weiß, wovon ich spreche, teilen Sie bitte einen Link.