1. 多种换行样式
在日常业务中常见换行需求比如单行换行、多行换行。尤其在手机端实现，为了更好的展示文字列表以及UI展示效果, 通常会使用一些需要修改的换行样式。
1.1 常见的换行方式
// 单行换行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// 多行换行，可控制具体几行之后再换行
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
上面是常见的换行方式，但是如果需要实现以下的效果，上面的代码可能就不能满足了。
1.2比较优雅的换行方式
上面的文本如果不需要换行 就不需要展示 查看更多按钮，以下是实现代码：
<div class="wrapper">
<div class="text_box" style="-webkit-line-clamp: 2;">
<div class="more_btn">查看更多</div>
浮动元素是如何定位的正如我们前面提到的那样，当一个元素浮动之后，
它会被移出正常的文档流，然后向左或者向右平移，
一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>
</div>
.wrapper {
display: flex;
/* 居中*/
margin: 50px auto;
width: 600px;
overflow: hidden;
border-radius: 8px;
padding: 15px ;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.text_box {
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
display: flex;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
position: relative;
}
.text_box::before {
content: '';
height: calc(100% - 24px);
float: right;
}
.more_btn{
float: right;
clear: both;
margin-left: 10px;
font-size: 16px;
padding: 0 8px;
background: #3F51B5;
line-height: 24px;
border-radius: 4px;
color: #fff;
cursor: pointer;
border:0;
}
1.3 其他的换行方式
比如在业务中，后端返回的字符串包括的只包含\n 我也需要换行 可以通过给这个盒子设置 white-space：pre; 或者 white-space：pre-wrap; 或者 white-space：pre-line 来实现。
