與文本截斷的DIV

我tryng使一個div響應平板視圖。與文本截斷的DIV

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

div (Desktop view)

div (Tablet view)

事業部2A，2B & 2C包含文本必須在平板電腦視圖中截斷（文本在同一行）。

在此先感謝您的答案。

來源

2015-11-04 Biblio

可以顯示一些代碼？ –

取決於你的CSS和HTML的樣子，但我會說。不要爲div 2a，2b和2c設置固定高度並以百分比工作。看看這個[demo]（https://jsfiddle.net/kw8vgzy9/） – Rotan075

請添加照片（截圖）問題。 –

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

來源

2015-11-04 14:17:53

我的情況比預期的更復雜。這是我的網站與頭部（中心右側）雜亂的div：goo.gl/LwFD5a – Biblio

與文本截斷的DIV

回答

相關問題