5分钟快速了解text-wrap:balance的作用

这篇文章发布于 2023年07月25日,星期二,15:03,归类于 CSS相关。 阅读 10405 次, 今日 1 次 8 条评论

 

一、开门见山

text-wrap:balance 可以让每一行文字的个数尽可能的相等,即使宽度足够的大。

下面这张图很好地演示了这种排版特性。

balance值效果

眼见为实,您可以狠狠地点击这里:CSS text-wrap:balance与文字排版demo

这种文字排版布局,特别适合用在居中描述信息的呈现中,尤其是官网首页的slogan等信息。

比方说下面GIF的录屏示意,可以看到balance的效果明显好了很多。

换行处理

在过去,这样的效果,往往需要 wbr 标签来实现。

二、关门口街

虽然说text-wrap属性本意是控制文字的排版,实际上,任何的内联元素其都是可以控制的。

因此,我们可以使用text-wrap:balance声明实现一些过去我们不太方便实现的排版效果。

比方说点赞功能要显示点赞人的头像,在过去,可能是这样的排版,第一行可能很多,第二行就几个,排版效果并不是很美丽,如下图所示。

点赞传统实现排版

如果我们该用text-wrap:balance声明来实现,则每一行的头像会尽可能的数量相等,体验会好很多,如下图所示。

点赞新的排版实现

眼见为实,您可以狠狠地点击这里:text-wrap:balance实现图文布局demo

三、兼容性和polyfill等

text-wrap:balance 属于CSS Text Level 4规范内容,比较新,目前仅Chrome及其内核的浏览器支持。

balance值的兼容性

虽然兼容性一般,但是业界提供了成熟的polyfill解决方案,是Adobe出品的。

项目地址见:https://github.com/adobe/balance-text

目前项目有1.3K的star数,兼容IE浏览器。

其他

text-wrap属性的语法如下:

text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;

其中:

  • wrap是默认值,表示文字在宽度不足的时候换行。
  • nowrap表示文字不会换行,永远一行显示。不过我们平时用的比较多是white-space:nowrap,两者效果是类似的,只是white-space的兼容性要好很多。

OK,以上就是本文的全部内容,五分钟差不多了吧。

细心的人可能注意到本文是白天发布的,因为原本计划的自驾游提前结束了,而提前结束的原因是昨天我发烧了,结果测了抗原,阳了😂

不过症状比第一次轻了很多,今天已经恢复了力气,这才坐在电脑前写点东西。

真是人算不如天算。

所以,看在我生病创作的份上,帮忙转个发吧~

🥰🥰🥰

(本篇完)

分享到:


发表评论(目前8 条评论)

  1. totodo说道:

    react 有一个 react-wrap-balancer 就是靠着这个实现的,再没有这个的情况下会通过js来计算 max-width 来实现

  2. fiveeth说道:

    又get到了一个知识点,谢谢老师

  3. CC说道:

    white-space 变成 white-space-collapse 和 text-wrap 的简写属性了…

  4. lxy说道:

    早日康复

  5. aizigao说道:

    不亏张老师,自个一看过去完全不知道有啥用,确实场景这个确实好用

  6. leonfong.me说道:

    感觉对英文标题的排版很有帮助

  7. 代码如诗如画说道:

    很实用