Wrap text to minimize width in a variable width container

user_16628380 0
Viewed 133

I have a set of boxes that each contain some text and an image. Each box must be between 100px and 200px. The text can be up to 2 lines and will truncate otherwise. I want to minimize the width of my box so that the text wraps if possible without truncating. In other words, the box should only be 200px wide if the text truncates or takes up the full two lines. Setting something like width: max-content on the text section causes the box to hit 200 px before wrapping at all. I'm very new to CSS so any help is appreciated.

Example of what I want and what it does instead enter image description here

Sample code:

<div class="my-box">
    <div class="section-text">
        <span class="truncated-text">a very very long sentence is here</span>
    </div>
    <div class="section-image">
        <img src="https://my_cool_url.jpg">
    </div>
</div>

.my-box {
    min-width: 100px;
    max-width: 200px;

    .section-text {
        width: auto;
        .truncated-text {
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .section-image {
        display: flex;
        overflow: hidden;
        margin: auto;
    }
}
flexbox sass css html
2 Answers

Hope this will help. Try following example..I have added more boxes with more content also

<div class="my-box">
    <div class="section-text">
        <span class="truncated-text">a very very long sentence is here</span>
    </div>
    <div class="section-image">
        <img src="https://img.icons8.com/pastel-glyph/2x/download--v2.png">
    </div>
</div><br>
<div class="my-box">
    <div class="section-text">
        <span class="truncated-text">a very very long sentence is here a very very long sentence is here</span>
    </div>
    <div class="section-image">
        <img src="https://img.icons8.com/pastel-glyph/2x/download--v2.png">
    </div>
</div><br>
<div class="my-box">
    <div class="section-text">
        <span class="truncated-text">a very very long sentence is here</span>
    </div>
    <div class="section-image">
        <img src="https://img.icons8.com/pastel-glyph/2x/download--v2.png">
    </div>
</div>


.section-text {
    text-align: center;
    max-width: 150px;
    padding: 0px 40px;
}
.my-box {
    min-width: 100px;
    max-width: 200px;
    border: 1px solid;
    text-align: center;
    border: 1px solid;
}
.truncated-text {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 39px;
}
.section-image {
    overflow: hidden;
    margin: auto;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-end;
    align-items: center;
}
img {
    border: 1px solid;
    max-width: 100px;
    text-align: center;
}
user_62242280

Ended up working around it by changing the max-width based on the length of the text. It's not perfect but it looks better than having the extra long boxes all the time

<c:set var="isLongTitle" value="${fn:length(myText) gt 32}"/>
<div class="my-box ${isLongTitle ? 'long-box' : 'short-box'}">
    // text
    // image
</div>

.my-box {
    min-width: 100px;
}

.short-box {
    max-width: 150px;
}

.long-box {
    max-width: 200px;
}
user_166283800
Related