CODEWITHSUNDEEP
javascripthtmlcss
emmea90
emmea90

Reputation: 357

CSS - Expand Div on text overflow to the nearest word wrapping

I am currently in this situation

I have a container with two titles, h1 and h2

<div class="container">
    <h1>Word1 Word2 Verylongword3</h1>
    <h2>Brief text</h2>
</div>

Titles are in vertical, one above the other using flexbox

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 350px;
}

I am asked to make in the most case possible the container staying 350px width but in case of very long word, the container has to expand himself in way that the text is wrapped more than you can but longest word (that was in text-overflowing) is all inside the div.

Practically, as rendering, text should be

Word1 Word2

Verylongword3

And not

Word1 Word2 Verylongword3

If i fix the div width, i have text overflow. If i use flexbox or min-width text expands itself over all the line. Best solution is to do it in pure CSS but i may use javascript if its not theoretically possible in pure CSS.

I can't fix the width because Verylongword3 can be Word4 @ Word5 and in that case i should get

Word1 Word2

Word4 @

Word5

As render

EDIT: in other words, container if needed (word larger than 350px width) must expand himself to contain the longest word but keeping the word wrapping

Upvotes: 3

Views: 629

Answers (1)

emmea90
emmea90

Reputation: 357

For who may it concern, the solution in javascript: detect text scroll size and enlarge it

$('.container').css("width", $('.container')[0].scrollWidth + "px");

Upvotes: 1

Related Questions