css笔记

flex:1的情况下文本溢出隐藏

<template>
  <div class="flex">
    <div class="item"></div>
    <div class="flex-1">
      <p>深蓝的天空中挂着一轮金黄的圆月，下面是海边的沙地，都种着一望无际的碧绿的西瓜。其间有一个十一二岁的少年，项戴银圈，手捏一柄钢叉，向一匹猹用力地刺去。那猹却将身一扭，反从他的胯下逃走了。</p>
    </div>
    <div class="item"></div>
  </div>
</template>

<style lang="scss">
.flex{
  display: flex;
  .flex-1{
    flex: 1;
    min-width: 0;
    p{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>