text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
clip属性值：文本字符在一定宽度点直接截断。

ellipsis属性值：字面意思我们就知道其临界点以省略号结束。

string属性值：就是溢出方式显示字符串可自定义，暂时Firefox浏览器可渲染其效果，应该还处于实验阶段。

三个值均以在一定宽度内，如果其宽度不足显示，text-overflow的属性值也会被截断。

 .list-item-name {
    width: 80px; 
    text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
    overflow: hidden;  
    white-space: nowrap;
  }

direction默认值是’ltr’，于是，上述未定义也是从左到右的顺序。
这里我们要改变其省略号到段前，我们只需要拼写direction: ‘rtl’ 即可。

 .list-item-name {
    width: 80px; 
    text-overflow: ellipsis;//text-overflow: clip|ellipsis|string;
    overflow: hidden;  
    white-space: nowrap;
     direction: rtl;//省略方向：ltr:省略号在右侧，rtl：省略号在左侧； 
  }

-webkit-line-clamp: 3; /限制文本的行数，只显示3行/
-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */
white-space: nowrap; //文字不换行