css文本溢出省略号

单行文本溢出显示省略号

    <div id="box">
		君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。
    </div>
    <style>
    	/* 四个关键属性 */
        #box {
            width: 200px;					/* 定宽度 */
            white-space: nowrap;			/* 文本不换行 */
            overflow: hidden;				/* 隐藏文本溢出的部分 */
            text-overflow: ellipsis;		/* 省略号代表文本溢出部分 */
        }
    </style>

效果图

多行文本溢出显示省略号

    <div id="box">
		君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。
    </div>
    <style>
    	/* 五个关键属性 */
        #box {
        	width: 200px;						/* 定宽度 */
        	display: -webkit-box;				/* 盒子模型 */
        	-webkit-box-orient: vertical;		/* 子元素横向排列 */
   			-webkit-line-clamp: 3;				/* 限制在一个块元素显示的文本的行数 */
            overflow: hidden;					/* 隐藏文本溢出的部分 */
        }
    </style>

效果图

多行文本会有兼容问题，一些低版本的浏览器或者苹果safria浏览器不支持 display: -webkit-box。

方案一

    <div style="padding: 16px; background-color: #fff; border: 1px solid #000">
      <div class="box">
        君不见，黄河之水天上来，奔流到海不复回。
        君不见，高堂明镜悲白发，朝如青丝暮成雪。
        人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不愿醒。
        古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。
        主人何为言少钱，径须沽取对君酌。
        五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
      </div>
    </div>
    <style>
		.box {
		  width: 200px;
		  height: 100px;
		  background-color: #fff;
		  overflow: hidden;
		  line-height: 20px;
		  text-align: justify;
		  position: relative;
		}
		/* 因为省略号是放在文本最后面的，所以使用伪元素after */
		.box::after {
		  content: "...";
		  width: 1em;
		  background-color: #fff;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		}
	</style>

效果图

由于省略号是绝对定位，可能存在定位不对齐问题。

方案二

    <div class="box">
      <div class="more">...</div>
      <div class="box-content">
        君不见，黄河之水天上来，奔流到海不复回。
        君不见，高堂明镜悲白发，朝如青丝暮成雪。
        人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。
        烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。
        与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不愿醒。
        古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。
        主人何为言少钱，径须沽取对君酌。
        五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
      </div>
    </div>
	<style>
		.box {
		  border: 1px solid #888;
		  padding: 16px;
		  background: skyblue;
		}
		.box::before {
		  content: "";
		  display: block;
		  height: 80px;
		}
		.box-content {
		  width: 400px;
		  height: 96px;
		  margin-top: -80px;
		  overflow: hidden;
		}
		.more {
		  float: right;
		  line-height: 1;
		}
	</style>

效果图

以上2个方案，当内容字体大小和行高有调整时，省略号定位就有偏移，需要根据实际情况进行调整。

使用js判断是否显示省略号

dom.scrollHeight > dom.clientHeight