目录中的省略号如何动态改变长短？

最简单的办法就是一张图片放在下面，如果不用图片的话，那就边框线。

用边框线的话，那就是用dotted线条。

li {position:relative;height: 30px;overflow: hidden;}
li span {position: relative;display:inline-block;padding-right: 10px;background-color:#fff;z-index: 2;}
li em {position: absolute;top: 0;right: 0;height: 30px;padding-left: 10px;background-color: #fff;z-index: 2;}
li:after {content:"";position:absolute;top:50%;left:0;height:0;width:100%;border-top:1px dotted #333;}
<ul>
  <li><span>这里是文字啊</span><em>1</em></li>
  <li><span>这里是文字啊</span><em>2</em></li>
  <li><span>这里是文字啊</span><em>3</em></li>
  <li><span>这里是文字啊</span><em>4</em></li>
</ul>