CSS - 长文本会破坏内容

Question

我正在使用嵌套的div元素，这些元素的样式就像一个包含行和单元格的表。在每一个中，都会有一个复选框，一个图像和一些文本内容。如果文本内容长于图像宽度，则包含图像和内容的div会突然显示，使其不再与复选框内联。

我希望在发生之前将文本换行。

内容实际上是动态的（使用ASP.NET），因此我无法修复容器的宽度或使用JavaScript。

我创建了一个JSFiddle来复制我遇到的问题：

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>

Answer 1

如果您的图像宽度为120px，那么您可以将内容设置为相同，以便在表格单元格中“包装”。

.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>

Answer 2

这设置文本可以达到的最大宽度，与它所在的图像相同，为其提供所需的文本换行

这是整个事情：

＆＃13;

＆＃13;

var x = $('.image').css('width');
$('.content').css('max-width', x)

＆＃13;

    .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 {
      
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我更新了你的小提琴。我将.row和.cell更改为flexbox容器

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

.row {
  display: flex;
}

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