文本超出指定行数，变成...

<div class="text-flow">one剑飘花one剑飘花one剑飘花one剑飘花one剑飘花one剑飘花</div>

 

多出1行变成...

.text-flow {

  width: 100px;

  word-break: break-all;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

 

多出2行变成...

 

.text-flow {

  overflow:hidden;

  text-overflow:ellipsis;  /*文本溢出时显示省略标记*/

  display:-webkit-box;  /*设置弹性盒模型*/

  -webkit-line-clamp:2; /*文本占的行数,如果要设置2行加...则设置为2*/

  word-break: break-all;

  -webkit-box-orient: vertical;

}