css js 文本 文字 超出 溢出 显示 省略号

参考文章：CSS实现单行、多行文本溢出显示省略号（…）

单行文本溢出显示省略号

要使用块级元素的标签或者设置display: block

<span class="text">发电方式发电方式发电方式发电方式发电方式发电方式发电方式发电方式发电方式发电方式发电</span>

<style scoped>
.text {
  width: 200px;  
  display: block; /* 块级 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 一行 */
}
</style>

效果图：

多行文本的溢出显示省略号，目前支持webkit内核的css样式 -webkit-line-clamp 可以做到，但它针对火狐浏览器就行不通了

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

效果图：