When text exceeds its container, it automatically adjusts the width of the parent element and fills up any extra white space even after overflow. I'm trying to find a solution to allow for text overflow while still restricting it to just 2 lines and resizing the parent container to reduce unnecessary white space.
I managed to resize the container using flex-box, but then I couldn't limit the text to 2 lines.
If you'd like to see my current progress, here's a codepen link: https://codepen.io/illyabalakin/pen/KKGNvbY
.btn {
max-width: 220px;
height: 50px;
padding: 0 30px;
}
.flex {
display: flex;
flex-grow: 1;
width: min-content;
}
span {
display: -webkit-box;
hyphens: auto;
overflow: hidden;
overflow-wrap: break-word;
text-transform: uppercase;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}<button class="btn">
<span>Extended Text Overflowing overflow</span>
</button>
<button class="btn">
<span class="flex">Extended Text Overflowing overflow</span>
</button>Check out this image to see the excess empty space that I want to eliminate