省略号溢出与背景框

Question

我知道你不能使用overflow：隐藏内联元素。那么我怎样才能得到这样的文字：

而且这个时间更长：

当我有这个时，溢出不起作用：

.box-text {
  background-color: grey;
  padding: 4px;
  display: inline;
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;
}

如果我改变显示：内联显示：阻止框拉伸整个宽度。

Answer 1

充分利用两个世界 - display: inline-block;，并设置宽度：

.box-text {
    background-color: grey;
    padding: 4px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width:50px
}

<强> jsFiddle example

Answer 2

您应该设置宽度div的宽度。它不能只是猜测停止的宽度并开始省略号。你可以这样做：

.box-text {
    background-color: grey;
    padding: 4px;
    display: inline;
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}