css文字溢出省略不生效的场景记录

场景1：行内元素不生效

<template>
  <span class="text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</span>
</template>

<style>
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

将span改成div，就生效了

<template>
  <div class="text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</div>
</template>

<style>
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

这是由于满足文字省略需要元素自身有宽度，但是行内元素没有宽度。

我们将span修改为inline-block，然后加上宽度也可以解决，div元素的宽度是100%，也就是容器的宽度，所以它也就能生效。

<template>
  <span class="text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</span>
</template>

<style>
.text-ellipsis {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

场景2：flex元素上使用文字省略会失效

<template>
  <div class="flex text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</div>
</template>

<style>
.flex {
  display: flex;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

解决方案：
将文字省略添加到子元素上。

场景3：flex布局中，孙元素文字溢出省略无效

<template>
  <div class="flex">
    <div class="son">
      <div class="text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</div>
    </div>
  </div>
</template>

<style>
.flex {
  display: flex;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

解决方案：

.son {
  width: 100%;
}

那么背后的原因是什么呢？

原因是flex的子元素，也就是son，它的min-width默认为auto，当min-width为auto时，元素的最小宽度为内容的宽度。

这时，son的宽度会随着子元素一起拓展，也就永远无法触发文字溢出省略的效果。

当我们给son设置width为100%的时候，它就不会随着子元素一直拓展下去了，而是获得父元素的宽度，这样孙元素的文字长度在触及son的上限后，文字溢出省略就会生效了。

场景4：flex布局中，多个孙元素时，文字溢出省略无效

<template>
  <div class="father">
    <div class="son1">123</div>
    <div class="son2">
      <div class="grandson text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</div>
    </div>
  </div>
</template>

<style>
.father {
  display: flex;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

在这种布局下，son2直接戳穿了father，导致了滚动条的出现

先说解决办法：
给son2添加一个min-width: 0

<template>
  <div class="father">
    <div class="son1">123</div>
    <div class="son2">
      <div class="grandson text-ellipsis">阿斯顿发斯蒂芬啊束带结发发生啦时代峰峻阿斯顿发第三方阿斯顿发斯蒂芬阿萨法撒沙发上。</div>
    </div>
  </div>
</template>

<style>
.father {
  display: flex;
}

.son2 {
  min-width: 0;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
</style>

文字省略生效了

那么背后的原因是什么呢？

原因是flex的子元素，也就是son1 son2，它们min-width默认为auto，当min-width为auto时，元素的最小宽度为内容的宽度。

这又意味着，它们不能被压缩到比它们的内容更小，所以son2宁愿戳穿father，也不去对文字进行省略收缩。

当我们给son2设置min-width为0的时候，这句话就是在告诉它，你可以在需要的时候收缩自己，甚至可以收缩到0，而text-ellipsis就是这个需要它收缩的情况。

场景3也可以用min-width: 0来解决。