html 网页 <ul> 中怎么把超过固定长度字串截成 "..."

想在网页上固定长度区域内，把超长的文字截断变成 …

ul
{
width:100px;
}
li
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

<ul>
    <li> 她是首富女儿，驻美大使夫人，与宋美龄比肩国际舞台，称最美珍珠 </li>
    <li> 为什么百元美钞上印的是发明家富兰克林而不是&ldquo;国父&rdquo;华盛顿？ </li>
    <li> A-Frame:只要增加一行代码就可以制作VR网页_网络应用 / Web ...</li>
    <li> &ldquo;大内高手&rdquo;：国父孙中山的贴身保镖们，有男有女有老外,国父孙中山的贴身保镖们， </li>
  </ul>

• 她是首富女儿，驻美大使夫人，与宋美龄比肩国际舞台，称最美珍珠
• 为什么百元美钞上印的是发明家富兰克林而不是“国父”华盛顿？
• A-Frame:只要增加一行代码就可以制作VR网页_网络应用 / Web …
• “大内高手”：国父孙中山的贴身保镖们，有男有女有老外,国父孙中山的贴身保镖们，

可以实现截短, 但前面的 <li> 的点没有了。

她是首富女儿…
为什么百元美…
A-Frame:只…
“大内高手”…

ul.list-style-type 进行设定也没有用。

在外网找到办法，因此要搞开发先学翻墙， 大量资源：

list-style-position:inside;

{
    list-style-position:inside;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

---

终于找到一个完美解决方案：

style 里写

  .container{
    display: inline-block;
    vertical-align:middle;
    width:120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }

网页里写

<ul>
<li> <a  href="https://www.baidu.com/" target="_blank">
<b class="container">10分钟教你完成一个虚拟现实WEB体验-搜狐</b>
</a>(2016/7/24)
</li>
</ul>

如果想实现多行， 参考这里