display: flex下文本溢出处理

原理

Reference: 如何解决flex文本溢出问题

实现

  • 实现部分的代码为了方便，样式都是用UnoCSS写的

平常写页面时经常会遇到“文本超出部分显示省略号”这种需求：

这是很长很长很长很长很长很长很长很长很长很长的一句话
Code
  <div class="w-60 truncate">这是很长很长很长很长很长很长很长很长很长很长的一句话</div>

有时会有一些嵌套之类的复杂情况：

这是很长很长很长很长很长很长很长很长很长很长的一句话 这是一句不太长的话
这只是用来演示占位的
Code
  <div class="w-130 bg-yellow-100">
    <div class="bg-red-300">
      <span class="bg-blue w-50 inline-block truncate">这是很长很长很长很长很长很长很长很长很长很长的一句话</span>
      <span class="bg-green">这是一句不太长的话</span>
    </div>
    <div class="bg-yellow-300">这只是用来演示占位的</div>
  </div>

对于上图这种情况，大多数时候我们想要的效果可能是绿色的部分宽度固定，蓝色部分填满红色部分剩余宽度，超出部分显示省略号。由于应用text-overflow: ellipsis的元素需要设置一个宽度才会生效，因此为了实现上述效果，我们配合flex布局一起使用

这是很长很长很长很长很长很长很长很长很长很长的一句话 这是一句不太长的话
这只是用来演示占位的
Code
  <div class="w-130 bg-yellow-100">
    <div class="bg-red-300 flex">
      <span class="bg-blue truncate">这是很长很长很长很长很长很长很长很长很长很长的一句话</span>
      <span class="bg-green shrink-0">这是一句不太长的话</span>
    </div>
    <div class="bg-yellow-300">这只是用来演示占位的</div>
  </div>

看起来还不错。然而我们来看这么一种情况：

这是左侧布局
这是右侧父布局
这是右侧嵌套的子布局。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
Code
  <div class="flex">
    <div class="bg-green shrink-0">这是左侧布局</div>
    <div class="bg-red p-3">
      这是右侧父布局
      <div class="bg-blue">
          这是右侧嵌套的子布局。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
      </div>
    </div>
  </div>

我们希望蓝色部分可以实现单行超出部分显示省略号，我们分别对红色和蓝色部分设置text-overflow: ellipsis以及对红蓝部分同时设置text-overflow: ellipses看看效果：

这是左侧布局
这是右侧父布局 text-overflow: ellipsis
这是右侧嵌套的子布局。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
Code
  <div class="flex">
    <div class="bg-green shrink-0">这是左侧布局</div>
    <div class="bg-red p-3 truncate">
      这是右侧父布局 text-overflow: ellipsis
      <div class="bg-blue">
          这是右侧嵌套的子布局。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
      </div>
    </div>
  </div>
这是左侧布局
这是右侧父布局
这是右侧嵌套的子布局。 text-overflow: ellipsis。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
Code
  <div class="flex">
    <div class="bg-green shrink-0">这是左侧布局</div>
    <div class="bg-red p-3">
      这是右侧父布局
      <div class="bg-blue truncate">
          这是右侧嵌套的子布局。 text-overflow: ellipsis。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
      </div>
    </div>
  </div>
这是左侧布局
这是右侧父布局 text-overflow: ellipsis
这是右侧嵌套的子布局。 text-overflow: ellipsis。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
Code
  <div class="flex">
    <div class="bg-green shrink-0">这是左侧布局</div>
    <div class="bg-red p-3 truncate">
      这是右侧父布局 text-overflow: ellipsis
      <div class="bg-blue truncate">
          这是右侧嵌套的子布局。 text-overflow: ellipsis。这也是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一句话
      </div>
    </div>
  </div>

可以发现，只有对红蓝部分同时设置text-overflow: ellipsis才能实现我们想要的效果。

再来看一种复杂情况，这是我最近在写一个播放器控制栏时遇到的：

我希望这里的歌名可以实现超出一行时使用省略号的效果

头像
这是一首很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的歌名
歌手
一些播放控制按钮

正常情况下我只需要像上面的例子一样，对橙色以及它的父级蓝色部分设置text-overflow: ellipsis就行

头像
这是一首很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的歌名
歌手
一些播放控制按钮

但是，因为一些其他原因，导致我现在必须对整个控制栏，即绿色部分，设置position: absolute

头像
这是一首很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的歌名
歌手
一些播放控制按钮

这时你会发现整个绿色部分的高度已经塌缩不见了，我们先不管这一点。将你的浏览器宽度拉小一点，你会发现text-overflow: ellipsis已经不是我们想要的效果了。虽然仍然有省略号，但x方向上已经超出了页面的范围。

解决方法：对蓝色部分添加 

      .blue {
        flex: auto;
        /* 或min-width: 0; */
        width: 0;

        /* 去掉width: 100%; */

        /* 可去可不去 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

此时就已经生效了。

头像
这是一首很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的歌名
歌手
一些播放控制按钮

Edit this page on GitHub
评论加载中 (ง •̀ω•́)ง
Table of Contents