我们希望做一个下图所示的效果：
image.png
代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     .container {
  9.       width: 400px;
  10.       background-color: lightblue;
  11.       display: flex;
  12.     }
  13.     .label {
  14.       padding: 0 16px;
  15.     }
  16.     .content {
  17.       padding: 0 16px;
  18.       flex: 1;
  19.       background-color:rgba(200, 50, 10, .3);
  20.     }
  21.     .ellipse {
  22.       text-overflow: ellipsis;
  23.       overflow: hidden;
  24.       white-space: nowrap;
  25.     }
  26.   </style>
  27. </head>
  28. <body>
  29.   <div class="container">
  30.     <div class="label">
  31.       诗歌:
  32.     </div>
  33.     <div class="content">
  34.       <div class="ellipse">
  35.         参老子上善若水
  36.         悟孔子博学爱人，
  37.         学孟子仁礼智信，
  38.         兼修身平心静气。
  39.         贵有道行正义事，
  40.         始让平风声雨声，
  41.         荫天下一缕阳光，
  42.         泽快乐密密麻麻。
  43.       </div>
  44.     </div>
  45.   </div>
  46. </body>
  47. </html>

上述代码中，我们给content容器设置了 flex: 1 , 这样container除去左侧label剩余的宽度会被content占据。
给ellipse设置超出文本…显示。但是结果却是下图这个样子：

image.png

我们看到ellipse里的内容并没有换行，content本身的宽度也被内容撑大了。

这就是flex碰上ellipse，出现的怪异问题。

解决办法

给content加属性 min-width:0 或者 overflow: hidden 效果就正常了：

.content {
  padding: 0 16px;
  flex: 1;
  background-color:rgba(200, 50, 10, .3);
  min-width: 0;
    /*overflow: hidden*/
}