css 实现单行、多行文本显示

1.单行显示文本，超出显示省略号，很容易实现（需要加宽度width属来兼容部分浏览）：

width:200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2.多行文本显示，限制行数，超出显示省略号，如下实现：

width:200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

3.多个字符限制不换行，横向缩放，来实现固定宽度内，中英文字符不一致，显示效果不换行且优雅好看：

<div class="onelinelabel" >
    <b v-if="$i18n.locale==='cn'||$i18n.locale==='ja'||$i18n.locale==='ko'||$i18n.locale==='tw'" :style="$t('m.fileName').length>6?'transform:scaleX('+5/$t('m.fileName').length+');':''">1{{$t('m.fileName')}}</b>
   <b v-else :style="$t('m.fileName').length>10?'transform:scaleX('+10/$t('m.fileName').length+');':''">2{{$t('m.fileName')}}</b>
</div>

.onelinelabel{
  float: left;
  width: 90px;
  text-align: right;
  font-size: 14px;

  b{
    transform-origin: right;
    float: right;
    display: inline-block;
    margin-right: 2px;
    font-weight: normal;
    white-space:nowrap;
  }
}

如上效果借助vue项目中 i18n翻译和vue样式变换，仅作为参考。