與文本截斷的DIV

Question

我tryng使一個div響應平板視圖。

這裏有一些圖片來解釋什麼是我的問題：

div (Desktop view)

div (Tablet view)

事業部2A，2B & 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>