混淆哪個div需要溢出隱藏

我們正在使用div容器設計一個簡單的SMS列表視圖。基本的想法是讓這個頁面適用於不同的手機屏幕尺寸。我不想加載像bootstrap這樣的第三方腳本。混淆哪個div需要溢出隱藏

我成功地設計了頁面，它在http://jsfiddle.net/my9Lt7jf/可用。它看起來不錯，但是如果我將瀏覽器縮小到更小的寬度，那麼容納名稱和手機號碼的div容器就會換行並分解到下一行。這同樣適用於短信。當瀏覽器縮小到更小的寬度時，我不想將它帶到下一行。相反，我希望文本可以隱藏3個點，這樣它就可以在最後以3個點顯示在一行中。

代碼

.his_outercontainer{ 
    width:100%; 
    border:1px solid #cccccc; 
    height:50px; 
    display: table; 
} 
.his_leftcontainer{ 
    width:30px; 
    padding:3px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.his_middlecontainer{ 
    padding:3px; 
    display: table-cell; 
} 
.his_rightcontainer{ 
    padding:3px; 
    display: table-cell; 
    text-align:right; 
} 
.his_mobilenumber{ 
    font-weight:bold; 
} 
.his_textmessage{ 
    overflow:hidden; 
    padding-top:3px; 
} 
.his_senttime{ 
    font-style:italic; 
} 
.his_flagindicator{ 
    padding-top:3px; 
}

HTML代碼

<div class='his_outercontainer'> 
     <div class='his_leftcontainer'> 
      <input type='checkbox' /> 
     </div> 
     <div class='his_middlecontainer'> 
      <div class='his_mobilenumber'> 
       Ramkumar <+911234567890> 
      </div> 
      <div class='his_textmessage'> 
       Happy birthday to you Mr.John 
      </div> 
     </div> 
     <div class='his_rightcontainer'> 
      <div class='his_senttime'> 
       31st Oct 10:45 pm 
      </div> 
      <div class='his_flagindicator'> 
       <img src='green.png' /> 
      </div> 
     </div> 
    </div>

它的樣子是如下

enter image description here

但是應該如何如下

的CSS 0

enter image description here

來源

2014-11-03 Malaiselvan

嘗試使用http：// www.w3schools.com/cssref/css3_pr_text-overflow.asp – SkelDave 2014-11-03 21:18:22

添加以下CSS

.his_mobilenumber { 
    width: 153px; /* Give it a fixed width and set the overflow as below */ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2014-11-03 21:20:14 shakirthow

謝謝，現在我可以看到文本不會突破第二行，並且還有3個點出現環。但它需要一個固定的寬度。提供固定寬度將始終顯示所有屏幕尺寸的大小。考慮到頁面顯示在平板電腦或寬屏幕上，即使有空格，它也只會顯示指定的寬度。 – Malaiselvan 2014-11-03 21:28:05

這是真的..因此，您可以使用媒體查詢，它根據屏幕大小設置寬度。[鏈接]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）。不幸的是，要使用「溢出」CSS功能觸發..應該有一個固定的寬度，可以溢出。另一個選擇是使用JS來操縱寬度 – shakirthow 2014-11-03 21:34:57

您可以嘗試使用text-overflow: ellipsis請參閱MDN我的信息。

來源

2014-11-03 21:19:59 Tom

做你嘗試使用：

div { 
     text-overflow: ellipsis; 
    }

來源

2014-11-03 21:20:17 Scoala

.his_mobilenumber 
    { 
    width: 300px; /* you can change this to your desired width */ 
    text-overflow: ellipsis; /* any text that overflows will be replaced with a '...' at the end'. */ 
    overflow: hidden; /* this will hide anything that overflows the container */ 
    whitespace: nowrap; /* text will never wrap to the next line */ 
    }

W3Schools的是一個很好的網站，用於幫助:)

來源

2014-11-03 21:26:42 user3476093

謝謝，是否有可能沒有所需的寬度。可能最小寬度，因爲我不想在更寬的屏幕手機顯示點。 – Malaiselvan 2014-11-03 21:34:52

混淆哪個div需要溢出隱藏

回答

相關問題