css - 带背景框的省略号溢出

Question

我知道您不能对内联元素使用 overflow: hidden。那么我如何获得如下所示的文本:

当它更长的时候:

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

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

如果我将 display: inline 更改为 display: block 框会拉伸(stretch)整个宽度。

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