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

最近两个月来在做一个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了。

 

Logo

前往低代码交流专区

更多推荐