常用到的換行屬性參考
最近學習微信小程序 常用flex布局
想實現(xiàn)的效果是左邊一個固定高寬的圖片绿聘，右邊是自適應(yīng)的文字运提，超出容器部分忽略顯示省略號
wxml
<view class="container">
<image src='/images/logo.jpg'></image>
<view class="text">
<text class="muti-line">軟件工程軟件工程軟件工程軟件工程軟件工程軟件工程軟件工程</text>
<text class="single-line">張海藩康聂，呂云翔張海藩，呂云翔張海藩页畦，呂云翔</text>
</view>
</view>
wxss
.container{
display: flex;
}
image{
flex: 0 0 200rpx;
height: 200rpx;
}
.text{
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-around;
}
/* 多行文本省略 */
.muti-line{
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
/* 單行文本省略 */
.single-line{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ps：.single-line需要設(shè)置 display: block; 但是父容器設(shè)置 display: flex; 子元素就會變成 inline-block
但是不行凳鬓？魁亦？后來 .muti-line 和 .single-line 加上 width: 70% 就勉強可以
優(yōu)秀的實現(xiàn)方式參考鏈接（實在太謝謝您啦）
解決辦法：父容器設(shè)置width: 0 或者 overflow: hidden
.text{
width: 0;
}
/* 或者設(shè)置overflow */
.text{
overflow: hidden;
}
原理是實現(xiàn)省略號效果父容器需要設(shè)置寬度不然會被子元素無限撐開虚吟，因此總有足夠的寬度在一行內(nèi)顯示所有文本，也就不能觸發(fā)截斷省略的效果
