CSS文字省略，省略号在前面(前面省略号，后面文字)

想做到一段文字只显示最后面的文字，前面的用省略号代替，可以用一下代码来实现

width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl; /* 从右向左文本方向 */

 效果图如下

整体css样式如下

 li {
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      direction: rtl; /* 从右向左文本方向 */
   }

 这样就可以达到省略前面只显示后面的效果了