实现单行文本居中和多行文本左对齐并超出显示"..."

Answer 1

• 单行文本居中。在 webkit 内核中适用。非 webkit 内核，可以是用 js 或者用 ::after 模拟。

   .single-text{
   	width: 500px;
   	font-size: 18px;
   	font-weight: bold;
   	text-align: center;
   	color: white;
   	background: lightblue;
   	display: box;
   	white-space: nowrap;
   	overflow:hidden;
   	text-overflow: ellipsis;
   }

• 多行文本左对齐。多行文本没有很好的解决方法，只能依赖 js 或者 css 的相对定位。

   .multi-text{
   	width: 50%;
   	height: 4.5rem;
   	line-height: 1.5;
   	padding: 20px;
   	background: lightblue;
   	overflow: hidden;
   	position: relative;
   	box-sizing: border-box;
   	
   	&::after{
   		content: '...';
   		height: 1.5rem;
   		position: absolute;
   		bottom: 5px;
   		right: 5px;
   	}
   }

示例代码：https://codepen.io/Konata9/pen/RwbYbRG