Bootstrap 5中已移除的text-justify类的替代方案是什么

官方下线该类的原因 #

在issue #29679中官方给出的移除原因主要有两点：

• 不同浏览器对两端对齐排版的实现逻辑差异极大，尤其是东亚文字（中文、日文、韩文）的排版适配存在大量不可控的兼容性bug，会出现字间距异常、换行错乱等问题
• 两端对齐在小屏响应式场景下的可读性很差，官方认为这类排版效果的实用价值远低于维护适配成本，因此选择将该类从默认工具类中移除

可用替代方案 #

你可以根据自己的使用场景选择以下两种方案实现相同效果：

• 自定义全局工具类
  你可以在自己的全局CSS文件中添加对应规则，和原Bootstrap的text-justify用法完全一致：

.text-justify {
  text-align: justify;
  /* 英文场景适配 */
  text-justify: inter-word;
  /* 若有中文等东亚文字排版需求可额外加以下规则 */
  text-justify: inter-ideograph;
}
/* 如果需要响应式变体，可参照Bootstrap断点规则自定义，比如平板以上生效 */
@media (min-width: 768px) {
  .md-text-justify {
    text-align: justify;
  }
}

• 直接使用内联样式
  如果只是单个元素需要用到两端对齐，直接给元素添加内联样式即可：
  <p style="text-align: justify">需要两端对齐的内容</p>

注意：如果你的站点需要支持低版本IE浏览器，需要额外测试两端对齐的排版效果是否符合预期

内容的提问来源于stack exchange，提问作者Noor