一行文字左对齐 居中对齐 两行文字 上对齐 居中对齐 超出两行省略

<div class="box flex-start-center-colum"><span class="lineTwo">蹴罢秋千，起来慵整纤纤手。露浓花瘦，薄汗轻衣透。
见客入来，袜刬金钗溜。和羞走，倚门回首，却把青梅嗅</span></div>


.box{
  width:20%;
  height: 100px;  // 这个高度是必须有的，需要将box撑开
  border: 1px solid red;
  /*line-height: 25px;*/
  font-size: 12px;
}
.flex-start-center-colum{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.lineTwo{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

成品：

后续：

在写小程序的时候 我也是这么写的。但是始终都是一行省略。

无论我是给文字的父级加上height还是固定死宽度，都不行。后来

直接在父级上添加：white-space: pre-wrap;   就可以强制换行。文字多了也可以省略。上效果图

 

撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。

都看到这儿了！不点个赞赞嘛！人家还没有获得过赞赞欸！