背景

当设计期望在图文混排时，末尾的文字能够超出显示，这里的的末尾文字可能是在图片之前，也可能是图片之后的。

如果你刚好使用了flex布局，发现超出省略不可用，主要是出现省略号的效果不可用。

下面分不同的情况为大家分析，我们应该如何处理。

仍然父元素使用flex布局

左边元素内容是相对固定宽度的 ，判断其是否能显示完整，图片也能显示完整，那么左侧根据实际宽度，右边占据剩余宽度，然后右侧使用超出省略号即可。

  1. <less>
  2.   .flex-demo1{
  3.   display:flex;
  4.   overflow:hidden;
  5.  height:50px;
  6.   line-height:50px;
  7.   .img{
  8.     width:100px;
  9.   }
  10.   .right-content{
  11.   flex:1;
  12.   overflow:hidden;
  13.   text-overflow:ellipsis;
  14.   white-space:nowrap;
  15.   }
  16. }
  17. </less>
  20. <div class='flex-demo1'>
  21.   <span>1 左边测试</span>
  22.   <img  class='img' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-400c9f754471500acf943afdb5cc58c3_xl.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642419082&t=32b5ffd10ac8fb84b3868d8855a4c39f' alt='' title=''/>
  23.   <span class='right-content'>eerteerteterteterteterteterteterteterteteerteterteteerteterteteertetertetetertett</span>
  24. </div>

不确定左侧和右侧那边会超出，均分，然后均使用超出省略，左侧部分也设置这个效果

缺点：浪费文本的自动占用其正确的空间

  1. <less>
  2.   .flex-demo1{
  3.   display:flex;
  4.   overflow:hidden;
  5.  height:50px;
  6.   line-height:50px;
  7.   align-items:center;
  8.   .img{
  9.     width:100px;
  10.   }
  11.   .content{
  12.   flex:1;
  13.   overflow:hidden;
  14.   text-overflow:ellipsis;
  15.   white-space:nowrap;
  16.   }
  17. }
  18. </less>

为什么一定要使用flex

就最终效果来说，如果超出省略是最难解决的效果，并且确实不确认文本是什么情况，这种时候，优先建议使用常规流布局，放弃flex布局，如果原本是希望flex实现多元素垂直居中，那么文本的垂直居中用行高，图片的垂直居中使用vertical-align:middle .

想提醒给大家的是，不要因为增加了flex弹性盒的布局方案，就忘记了常规的布局，以及常规布局中如何解决垂直居中的问题。

  1. <less>
  2.   .flex-demo1{
  3.   overflow:hidden;
  4.      height:50px;
  5.   line-height:50px;
  6.    text-overflow:ellipsis;
  7.   white-space:nowrap;
  8.   .img{
  9.     width:100px;
  10.   vertical-align:middle;
  11.   }
  12.   .content{
  13.  line-height:50px;
  14.   }
  15. }
  16. </less>

本文案例效果