css控制文本超出显示省略号结合flex布局

css控制文本超出显示省略号结合flex布局

本文只作为本人遇到相同问题时的查询，若有不足请指出。

本文遇到的情况

html代码

<div class="p"> 
<div class="p1"><span>xxxxxxx</span></div>
<div class="p2"><span>xxxxx</span></div>
</div>

给span元素直接加上，以下代码不会出现想要的效果

overflow: hidden;      //溢出隐藏
text-overflow: ellipsis; //溢出用省略号代替
white-space: nowrap;      //文本不换行

给span的父元素div加上，出现了想要的现象，但是在审查的时候发现span元素依然超出了div的范围只是文本达到了效果，现在就是要找一种方式让span也不超出。

1、把span元素变成块级元素

display: block;
overflow: hidden;      
text-overflow: ellipsis; 
white-space: nowrap;      

overflow 和 text-overflow只有在块级元素时生效。

2、span的父元素flex布局

.p2 {
	display: flex;
}
.p2>span {
	overflow: hidden;      
	text-overflow: ellipsis; 
	white-space: nowrap;      
}

但是只有一个span元素的时候，会出现flex的默认设置align-items: stretch;(占满整个容器的高度)等，还需要自行调整如

.p2 {
	display: flex;
	align-items: center;
}

3、当span的父元素div自适应的时候

在这种情况下父元素需要加上overflow: hidden; 不然在文字超出的情况下会把后面的元素的位置挤走。

.p {
    width: 200px;
    height: 100px;
	display: flex;
}
.p1 {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;  
}
.p1>span{
	overflow: hidden;      
	text-overflow: ellipsis; 
	white-space: nowrap;    
}
.p2 {
	width: 100px;
	display: flex;
	align-items: center;
}