flex布局导致ellispsis失效

问题描述

之前的文本超过长度省略文章中，讲到了如何通过CSS控制文本超过长度省略。但是在flex布局中，ellispis却失效了。举例说明：
文档结构如下：

<div class="container">
    <div class="div_1">
	</div>
	<div class="div_2">
	 <span id="content" class="text">这个是商户名称我觉得比较长了应该可以了</span>
	</div>
</div>

对应的css样式如下：

        .container {
		 display:flex;
		 width:500px;
		 border:1px solid;
        }

        .div_1{
		 flex:10;
		 background-color: red;
		}
		
		.div_2{
		 flex:3;
		}
		
		.text{
            overflow: hidden;
            white-space:nowrap;
            text-overflow:ellipsis;

            border:1px solid #cccccc;
		}

整个容器采用flex布局，里面两个div分别占10和3的比例。但是出来的效果却是这个样子：

很明显这个比例并不是10：3，而是完全显示了文本长度。而且为文本元素设置宽度也不起作用，如下所示：

.text{
            overflow: hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            border:1px solid #cccccc;
			
			width:10px; // 这个宽度不会起作用
		}

究其原因，在white-space:nowrap;的前提下，flex已经失效了。在去掉这个属性后，flex布局恢复正常：

但是这个偏离了我们的初衷，去掉了white-space:nowrap;之后，文本省略就无法实现了。

解决方案

根据元素的结构不同，有两种不同的解决方案：

1、如果文本父元素参与了flex布局（如上面的例子中的文档结构所示）

那么可以为文本父元素添加一个width，例如：

.div_2{
		 flex:3;
		 width:1px;
		}

然后文本采用block显示：

.text{
	display: block; // 必须采用block，否则依然不会起作用
   
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

    border:1px solid #cccccc;
}

效果如下：

可以看到文本省略显示了。

2、如果文本元素参与了flex布局。

例如下面的例子，文本所在元素div_2直接参与了flex布局：

<div class="container">
    <div class="div_1">
	</div>
	<div class="div_2">
	 这个是商户名称我觉得比较长了应该可以了
	</div>
</div>

那么就比较简单了，直接对文本元素设置ellipsis，如下图所示：

.div_2{
		 flex:3;
		 
		 overflow: hidden;
         white-space:nowrap;
         text-overflow:ellipsis;
		}

可以的看到，文本同样省略了。
通常情况下，文本一般是放在span、p、label等元素中，而设计布局的时候，一般使用的是div元素，因此方案一比较通用一点。