1分钟速度了解text-align match-parent声明

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12196
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、直接进入正题

text-align:match-parent声明的作用就是使用和父元素一样的对齐方式。

可仔细一想，这个属性值就很奇怪，text-align本身就具有继承特性，为何还要多此一举设计一个match-parent呢？

因为现实开发中存在一个极为罕见的使用场景。

且看案例：

<div class="box">
  <p id="p">我的对齐是？</p>
</div>

.box {
  text-align: end;
}

此时，如果我们想要得知<p>元素的textAlign计算值，得到的结果会是 end。

console.log(getComputedStyle(p).textAlign);
// 结果是 'end'

end? any problem?

这不很正常吗，不是理所当然的吗？

非也非也!

比方说下图所示的对称布局：

最简单高效的实现就是使用CSS逻辑属性，外加direction属性控制方向。

text-align:end就是逻辑属性。

下面问题来了，我们我希望知道布局列表中的元素是左对齐还是右对齐，会发现运行getComputedStyle(p).textAlign这行代码是无效的。

因为无论哪个方位，返回的都是end，而不是left或者right。

正是由于这样的场景存在，于是设计了match-parent。

比方说，我们把上面的CSS代码换成：

.box {
  text-align: end;
  p {
    text-align: -webkit-match-parent;
    text-align: match-parent;
  }
}

此时，默认情况下，<p>元素的textAlign计算值就是right.

console.log(getComputedStyle(p).textAlign);
// 结果是 'right'

如果此时<p>元素的上下文处于 direction: rtl 环境中，那么返回的textAlign计算值则回是 left。

这就是text-align:match-parent声明的唯一作用，可以返回当前元素精确对齐方向left/right，而不是含糊其辞的start/end。

---

二、注定很少使用的特性

direction属性本身就很少使用，毕竟属于CSS布局高级技巧。

加上需要获取textAlign计算值的场景本身就很小众。

所以，在实际生产环境需要用到match-parent的概率近乎是0.

可以说就是一个玩具特性，大家了解下有这么个东西就好了。

最后看下其兼容性，出乎意料，虽然作用鸡肋，但是兼容性却出奇的好，全都支持，就是Chrome浏览器还需要加-webkit-私有前缀。

装逼作用

如果抛开match-parent原本的作用，我们不是不可以在生产环境使用，不如这样，所有需要使用 text-align:inherit 代码的地方，全部替换成 text-align:match-parent，虽然渲染效果是一样的，但是装逼效果天差地别，同事一看你写的代码，顿时高山仰止，“望其项背”，爽！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12196

（本篇完）