问题描述

设置了text-overflow但是不生效

<div class="wrap">
  <div class="grandpa">
    <div class="father">
      <span class="child">我是一个子元素，我要写很多字把宽度撑开，我要写很多字把宽度撑开，我要写很多字把宽度撑开，我要写很多字把宽度撑开</span>
    </div>
  </div>
</div>

.wrap {
  width: 300px;
  box-shadow: 0 0 3px 1px #000000;
  padding: 5px;
}
.grandpa {
  box-shadow: 0 0 3px 1px peru;
  padding: 5px;
}
.father {
  display:flex;
  box-shadow: 0 0 3px 1px royalblue;
  padding: 5px;
  overflow:hidden;
  text-overflow: ellipsis;
}
.child {
  white-space: nowrap;
}

探索

正向思考:🤔

text-overflow的生效条件是什么？

1. 包裹文字的内联盒子的第一个父级块盒必须是有宽度的
2. 父级块盒设置了overflow:hidden;和text-overflow,内联盒子设置了white-space: nowrap;

逆向思考:🤔

为什么在我写的css中text-overflow不生效?
father设置了display:flex之后，child变成了flex-item,flex-item是父级块盒，里面的文字会形成一个匿名内联盒子,这时候匿名内联盒子的第一个父级块盒就应该是span.child,而不是div.father

探索过程

codepen.io/weiwenyue/p… github.com/xwchris/blo…