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;
}