为什么css不应用于span标签，背景图像不显示

Question

我制作了一个如图所示的标题。我在头球时面临两个问题。我无法将省略号添加到span标记中。我使用了一个span标签。当屏幕分辨率很小时，我想添加省略号。我真的很喜欢。我想在这个元素上添加省略号。

<div class='sign-out'>
    <span>Show  name</span>
    <a>Sign out</a>
</div>

.sign-out span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 10%;
}

我想添加图片，如上传的图片所示。它没有适当显示，因为它是演示图像。

<div class='toggle-icon'>
    <span class='image-background'>
        <img src='https://dl.dropboxusercontent.com/s/gisoddbkajwuk1j/chart.png?dl=0'/>
    </span>
    <span class='image-background'>
        <img src='https://dl.dropboxusercontent.com/s/6yft5r97hi1pik7/table.png?dl=0'/>
    </span>
</div>

[！[在此输入图像描述][1]][1]

这是我的密码。

http://plnkr.co/edit/veE8TXHGVJzSa13sZQiD?p=preview我想删除按钮的背景阴影。但它不起作用。

.image-background{
    background-color: black;
    width: 30px;
    height: 25px;
    text-shadow: none !important;
    border: none !important;
    box-shadow: none !important;
  }

有什么更新吗？关于这个图像不显示？

Answer 1

Ellipsis问题修复：span是一个内联元素，您无法应用宽度，因此将其转换为内联块

.sign-out span {
    display: inline-blok;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 10%;
}

http://run.plnkr.co/7mdpZD3GnPdh2l7O/