DIV文本被截断

Question

我尝试对平板电脑视图做出响应。

以下是一些解释我问题的图片：

div (Desktop view)

div (Tablet view)

Div 2a，2b＆amp; 2c包含必须在平板电脑视图中截断的文本（同一行中的文本）。

先谢谢你的答案。

Answer 1

.container {
    background: red;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.row {
    display: table-row;
    width: 100%;
}

.div1, .div2 {
    display: table-cell;
    padding: 30px;
}

.div1 {
    background: blue;
    width: 60px;
}

.div2 {
    background: orange; 
}

.div2a, .div2b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<div class="container">
    <div class="row">
        <div class="div1">
            <!--<img src="some-image.png" />-->
        </div>
        <div class="div2">
            <div class="div2a">Lorem ipsum lorem ipsum lorem ipsum dolla Lorem ipsum lorem ipsum lorem ipsum dollar</div>
            <div class="div2b">Lorem ipsum lorem ipsum lorem ipsum dolla Lorem ipsum lorem ipsum lorem ipsum dollar</div>
            <div class="div2c">Lorem ipsum lorem ipsum lorem ipsum dolla Lorem ipsum lorem ipsum lorem ipsum dollar</div>
        </div>
    </div>
</div>