混淆哪个div需要隐藏溢出

Question

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

我设法设计了这个页面，它在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>

它的外观如下所示

​

​

但是它应该是怎样的呢？

​

​

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;
    }