flex 省略号 ellipsis

常用到的换行属性参考

http://www.runoob.com/w3cnote/css-en-cn-break-line.html

最近学习微信小程序 常用flex布局

想实现的效果是左边一个固定高宽的图片，右边是自适应的文字，超出容器部分忽略显示省略号

wxml

  
  
    软件工程软件工程软件工程软件工程软件工程软件工程软件工程
    张海藩，吕云翔张海藩，吕云翔张海藩，吕云翔
  

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需要设置 display: block; 但是父容器设置 display: flex; 子元素就会变成 inline-block

但是不行？？后来 .muti-line 和 .single-line 加上 width: 70% 就勉强可以

优秀的实现方式参考链接（实在太谢谢您啦）

https://blog.csdn.net/zgh0711/article/details/78270555

解决办法：父容器设置width: 0 或者 overflow: hidden

.text{
  width: 0;
}
/* 或者设置overflow */
.text{
  overflow: hidden;
}

原理是实现省略号效果父容器需要设置宽度不然会被子元素无限撑开，因此总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果