文本换行出现省略号

1. 单行文本不换行出现省略号
   以下三个css属性要配合使用

<div>
	<p>
		I love three things in the world:
		the sun, the moon, and you.
		The sun for day, the moon for night, and you forever
	</p>
</div>

div p{
	with:200px;
	/* 设定文本超出不换行*/
	white-space: nowrap;
	/* 设定文本超出隐藏*/
	overflow: hidden;
	/*出现省略号*/
 	text-overflow: ellipsis;
}

2. 多行文本超出 出现省略号
   此方法使用伪元素模拟省略号

<div>
	<p>
		I love three things in the world:
		the sun, the moon, and you.
		The sun for day, the moon for night, and you forever
	</p>
</div>

.ellipsis-container p {
    position: relative;
    width: 400px;
    border: 1px solid #ccc;
    height: 210px;
    line-height: 70px;
    overflow: hidden;

}
p::after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: '...';
    padding-left: 10px;
    background: linear-gradient(to right,transparent,white 70% );

}

标签：省略号,换行,sun,moon,overflow,文本
来源： https://www.cnblogs.com/YAN-YEN/p/15779981.html