目前列表樣式如下：

但是有滾動(dòng)條，我想把橫向滾動(dòng)條隱藏，添加了代碼：
overflow: hidden;

text-overflow: ellipsis;
之后，效果如下：

雖然做出溢出的效果，但是左側(cè)的圖標(biāo)消失了，求教各位要怎么解決，既能實(shí)現(xiàn)溢出顯示省略號(hào)的效果，且圖標(biāo)仍然在。

目前的html代碼如下：
<ul class = "ul-catalog" id = "catalogList" >

        <li 
            <span>dsadsddas(222)</span>              
        </li>
        <li 
            <span>a世界大結(jié)局打算看得見(222)</span>              
        </li>
    </ul>

css代碼如下：
ul.ul-catalog{

list-style: none;
font-size: 15px;
color: rgba(255,255,255,0.6);
font-family: 微軟雅黑;
margin: 0;
padding: 8px 10px;
box-sizing: border-box;
width : 300px;
height: 450px;
overflow: auto;

}
.ul-catalog li{

position: relative;
padding: 5px 0px 5px 5px;
margin-left: 21px;
line-height: 19px;
white-space: nowrap;
cursor: pointer;

}

.ul-catalog li:before{

content: "";
display: block;
position: absolute;
top: 8px;
left: -15px;
width: 10px;
height: 14px;
background-image: url(../images/bg/tree-btn.png);

}