CODEWITHSUNDEEP
htmlcssoverflowword-wrap
mbomb007
mbomb007

Reputation: 4251

CSS - Long text bumps down content

I'm using nested div elements styled to be like a table with rows and cells. In each one, there will be a checkbox, an image, and some text content. If the text content is longer than the image is wide, then the div containing the image and content is bumped such that it is no longer inline with the checkbox.

I'd like the text to wrap before that happens instead.

The content is actually dynamic (using ASP.NET), so I cannot fix the width of the containers or use JavaScript.

enter image description here

I created a JSFiddle that replicates the problem I'm having:

https://jsfiddle.net/L1h0y7yn/

.table {
    display: table;
    width: 800px;
    height: 100%;
    table-layout: fixed;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding-top: 24px;
    border: 1px solid red;
    overflow: hidden;
}

input {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.right {
    display: inline-block;
    vertical-align: top;
}

.image {
    width: 120px;
    height: 120px;
    background-color: darkcyan;
}

.content {
	
}
<div id="table" class="table">
    <div id="row_1" class="row">
        <div id="cell_1" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_2" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_3" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_4" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some longer block of text content.
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 307

Answers (2)

ebriggs
ebriggs

Reputation: 1216

If you're decided on a width of 120px on your image then you can set your content to the same to "wrap it" within the table-cell.

.content {
    width: 120px;
}


.table {
    display: table;
    width: 800px;
    height: 100%;
    table-layout: fixed;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding-top: 24px;
    border: 1px solid red;
    overflow: hidden;
}

input {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.right {
    display: inline-block;
    vertical-align: top;
}

.image {
    width: 120px;
    height: 120px;
    background-color: darkcyan;
}

.content {
	width: 120px;
}
<div id="table" class="table">
    <div id="row_1" class="row">
        <div id="cell_1" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_2" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_3" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_4" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some longer block of text content.
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Derek
Derek

Reputation: 859

I updated your fiddle. I changed your .row and .cell to flexbox containers

https://jsfiddle.net/L1h0y7yn/1/

.row {
  display: flex;
}

.cell {
  display: flex;
  flex: 1;
  padding-top: 24px;
  border: 1px solid red;
  overflow: hidden;
}

Upvotes: 0

Related Questions