CSS-单行/多行文本溢出显示省略号

1. 单行

white-space: nowrap; //禁止换行
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //溢出部分替换为省略号

2. 多行

对于内核是webkit的浏览器：

display: -webkit-box;
-webkit-box-orient: vertical; //设置子元素排列方式
-webkit-line-clamp: 3; //设置显示文本的行数
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //溢出部分替换为省略号

兼容不同浏览器，利用伪元素：

        .ellipsis::after {
            content: "...";
            display: inline;
        }

	<div class="app">
            <span class="content">aaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbccccccccccccccccc</span>
            <span class="ellipsis"></span>
    	</div>