如何让<li>中内容超出部分显示为...?

html：<aside> <ul class="sidebar"> <div class="out"></div> <li>手机 平板 电话卡<span>></span></li> <li>电视 盒子<span>></span></li> <li>路由器 智能硬件<span>></span></li> <li>移动电源 插线板<span>></span></li> <li>耳机 音箱<span>></span></li> <li>电池 存储卡<span>></span></li> <li>保护套 后盖<span>></span></li> <li>贴膜 其他配件<span>></span></li> <li>米兔 服装<span>></span></li> <li>箱包 其他周边<span>></span></li> <div class="a"> < img src="img/phone_img.png" width="20px" height="430px"> </div> <div class="c"> <div> <a href=" ">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> </div> <div class="m"> < img src="img/phone_img01.png" width="25px" height="430px" /> </div> <div class="n"> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> <div> <a href="#">选购</a > </div> </div> </ul> </aside> css：aside{ width: 250px; height: 443px; background: #949494; margin-left: 248px; position: relative; left: 115px; } aside ul.sidebar li{ width: 190px; height: 44.3px; position: relative; padding:0 30px; line-height: 44.3px; color: #fff; } aside ul.sidebar li span{ float: right; color: #fff; margin: 10px; } aside ul.sidebar li:hover{ background: #ff6700; } aside ul.sidebar div.out{ width: 500px; height: 442px; border: 1px solid transparent; background: #00ffff; position: absolute; left: 250px; z-index: 1; /* display: none; */ } aside div.a img{ position: relative; top: -438px; left: 280px; } aside div.c div a{ position: relative; top: -889px; left: 400px; } aside div.m img{ position: relative; top: -1343px; left: 511px; } aside div.n div a{ position: relative; top: -1794px; left: 667px; }在不改变代码的情况下，让左栏弹出框随着页面的缩放而缩放