大家好，我是南宫。好久没有写博客了。

最近两个月来在做一个Vue_CLI的项目（Vue2.x+ElementUI），项目不简单而且需求很急，一直在加班。这是我上班以来第一次写Vue_CLI项目，之前仅仅只有两次项目经验，而且都是自学时候做的，做这个项目让我很紧张，遇到不少问题，所以考虑写几篇博客分享一下思路和解决方案。

今天的标题有一点拗口了，很抱歉，好像用三言两语很难讲清楚这个需求，而这个需求我觉得是可以理解的，详细描述如下：

有这么一块宽度有限的空间，来显示一段文字内容。文字的字体大小确定，但是字数不确定，可能会超出这块空间，也可能不超出。要让这段文字正常显示很简单，给文字加上一个“单行超出显示省略号”就行了（具体代码可以百度，也可以参看我之前写的博客，这个太简单，就不细说了）。

现在，在这一段文字的后面，可能还要加一点附加信息，附加信息的字体样式跟前面的文字一致。重点来了，假如前面的文字很长很长，已经超出容器了，后面的附加信息也仍然要显示出来。

如果你还是看不懂我上面的这一段文字描述，我可以截图出来：

文字内容如果很少，就像第一排那样显示，文字后面紧跟着附加信息；文字如果很多，那就像红框里那样显示，占满空间，但是附加信息也能显示出来。

是的，我做到了！

接下来，我来讲讲我实现的过程。

首先，非常简单的一步，把“文字内容”和“附加信息”拆成两个p标签。这个很重要了，如果不拆开，文字内容过多的时候只能看到文字和省略号，是看不到附加信息的。

接下来该怎么办呢？

左边文字的宽度不确定，右边也不知道有几位数，只知道两个宽度加起来最多刚好占满。所以左边的宽度使用calc计算，等于总宽度减去右边的宽度？no，右边的宽度不知道是多少啊，怎么减？

让左边的flex属性为1，占据容器里除了附加信息以外的宽度，可以吗？no，如果文字很少，附加信息也还是会出现在最右边，也不符合效果啊。

根据我的一番假设和求证，最后得到了一个比较可靠的方案，就是有一点复杂，接下来我来讲解一下：

第一步，在固定宽度容器里面放一个div，宽度指定为最大可用宽度。（最大宽度本来是100%，如果你要预留一些空间，可以写成: width: calc(100% - 30px);）

如图所示，黑色的部分是固定宽度的容器，灰色部分是文字旁边要显示的内容，蓝色的部分是我刚才讲的div，设置一下宽度，要刚好占满剩余空间。

第二步，在这个蓝色div里面，再放入一个div。这个div里面才放置写字的p标签。

如图所示，绿色的div宽度不一定跟蓝色的div一样宽，而是由文字内容撑大的；当然，如果文字内容过多，也不能让绿色div的宽度超出蓝色的div。

由于上面两句话，可以得出绿色div的CSS样式如下：

.text-box {
  /* 宽度由内容撑大 */
  width: min-content;
  /* 宽度最大不超过父容器的可用空间 */
  max-width: 100%;
  display: flex;
  align-items: center;
}

 当然，由于里面要显示两个p标签，而且是单行显示，所以绿色div的display应该为flex，且align-items要为center，垂直居中两个p标签。

第三步，由于文字内容要占据“除了附加内容以外的空间”，所以文字内容的p的flex属性要设为1。

至此，大功告成，字少的时候是上面这个效果，字多的时候是下面的效果，文字内容都是占据了绿色div除了附加内容的部分。最关键的部分就是这个绿色div了。