Question

我们正在使用div容器设计一个简单的SMS列表视图。基本思想是使该页面适用于不同的移动屏幕尺寸。我不想加载任何第三方脚本，如bootstrap。

我设法设计了该页面，并在http://jsfiddle.net/my9Lt7jf/中提供。它看起来不错但是如果我将浏览器缩小到更小的宽度，那么保存名称和手机号码的div容器会被包装并打破到下一行。这同样适用于短信。当浏览器缩小到更小的宽度时，我不想将它带到下一行。相反，我希望用3个点隐藏文本，以便它可以显示在一行中，最后有3个点。

CSS代码

.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

但它应该如下所示

enter image description here

Answer 1

添加以下css

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

Answer 2

您可以尝试使用text-overflow: ellipsis查看MDN对我的信息。

Answer 3

你尝试过使用：

    div {
        text-overflow: ellipsis;
    }

Answer 4

.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是一个很好的帮助网站：）

困惑哪个div需要隐藏溢出

4 个答案: