爲什麼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

省略號問題的解決辦法： 跨度是一個內聯元素，你不能能夠應用的寬度，所以它轉換爲內嵌塊

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

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