react-bootstrap中Card.Text默认居中，text-justify类不生效如何解决

问题原因 #

你遇到的样式不生效问题由以下几个常见原因导致：

• React框架规范要求，给元素/组件添加CSS类需要使用className属性而非class属性，你写的class='text-justify'不会被React识别并渲染到DOM节点上，因此样式无法生效。
• 如果你使用的是Bootstrap 5及以上版本，官方已经移除了内置的text-justify工具类，就算属性书写正确也没有对应样式规则。
• 若Card的父容器（如<Card>、<Card.Body>）上设置了text-center类，更高的样式优先级会覆盖你给Card.Text设置的对齐规则。

解决方案 #

左对齐实现

直接使用Bootstrap内置的文本左对齐类，注意替换属性为className：

<Card.Text className="text-start">
This is some sample text. 文本会自动左对齐展示
</Card.Text>

如果使用的是Bootstrap 4版本，可以换成className="text-left"。

两端对齐实现

Bootstrap 5无内置两端对齐类，需要先自定义样式规则：

/* 全局CSS文件中添加 */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
}

之后在组件中调用即可：

<Card.Text className="text-justify">
This is some sample text. 文本会自动两端对齐展示
</Card.Text>

如果不想新增CSS规则，也可以直接使用行内样式快速实现：

<Card.Text style={{textAlign: 'justify'}}>
This is some sample text. 文本会自动两端对齐展示
</Card.Text>

样式优先级问题修复

如果修改后仍为居中对齐，检查外层<Card.Body>等父元素是否带有text-center类，移除该类或者给Card.Text的样式添加优先级即可。

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