问题描述
.rtl{
direction: rtl;
}
<Col lg="9" md="8" sm="7">
<div className="blog-details-Box">
<div className="blog-details-banner">
<img src={process.env.PUBLIC_URL + `/assets/images/${Datas[blogId].postImg}`} alt="" className="img-fluid" />
</div>
<div className="heading" dir="rtl">
<h4 className="rtl">{Datas[blogId].postTitle}</h4>
</div>
<div className="blog-auth_date d-flex">
<div className="author-img d-flex">
<p><Link to={process.env.PUBLIC_URL + "/"}>{Datas[blogId].authorName}</Link></p>
</div>
<div className="post-date">
<p><i className="las la-calendar"></i> {Datas[blogId].postDate}</p>
</div>
</div>
<div className="blog-details-desc">
<p> {Datas[blogId].postContent}</p>
</div>
</div>
</Col>
我试图仅在我的一页上显示一些乌尔都语文本。我试过在我的
标签上应用 dir="rtl" 但它不起作用。我曾尝试使用 react-with-direction,但它只会更改组件上所有项目的位置,而不会更改文本本身的任何内容。现在看起来就像下图一样,在这段代码中,标签应该在 rtl 中显示文本
解决方法
我使用了文本对齐方式使其正常工作,但不确定这是否是一个好习惯。