时间戳

首页 > 解决方案 > 从右到左的方向在 urdu 字体上无法正常工作

html - 从右到左的方向在 urdu 字体上无法正常工作

问题描述

我在 html 标签（跨度）中有乌尔都语文本。乌尔都语是从右到左写的，所以我申请了direction:rtl。但它似乎不起作用，因为在最后一行，它在右边留下了空间。示例将更好地解释。

.r2l {
  direction: rtl;
}
<html>

<head>
</head>

<body>
  <span class='r2l'>خدا کرے کے میری عرض پاک پے اترے</span>
  <span class='r2l'>وہ فصل گل جسے </span>
  <span class='r2l'>اندیشہ زوال نہ ہویہاں جو پھول کھلے کھلا رہےصدیوں یہاں 
  سے خزاں کو گزارنے کی مجال نہ ہو</span>
  <span class='r2l'>یہاں جو سبزہ اگے ہمیشہ سبز رہے</span>
  <span class='r2l'>اور ایسا سبز کے جسکیکوئی مثال نہ ہوخدا کرے کے نہ خام 
   ہو سر وقار وطن اور اس کے حسن کو تشوش ماہ وسا ل نہ ہو ہر ایک فرد ہو 
   تہذیب و فن کا</span>
  <span class='r2l'> اوج و کمال کوئی ملول نہ ہو کوئی خستہ حال نہ ہوخدا کرے 
     میرے ایک بھی ہم وطن کے لئےحیات جرم نہ ہو، زندگی وبال نہ ہو</span>
</body>

</html>

如果您运行该代码段并查看最后一行，它不会从右侧开始，而是将空间留空。

编辑 添加到 html 的实际场景，具有跨度的点是我将一个属性附加到悬停时显示的每个跨度（这是将文本添加到数据库中的时间）

标签： htmlcssbootstrap-4

解决方案

direction属性本身适用于块级元素，span不是block

改用p标签

.r2l {
  direction: rtl;
}
<html>

<head>
</head>

<body>
  <p class='r2l'>خدا کرے کے میری عرض پاک پے اترےوہ فصل گل جسے اندیشہ زوال نہ ہویہاں جو پھول کھلے کھلا رہےصدیوں یہاں سے خزاں کو گزارنے کی مجال نہ ہویہاں جو سبزہ اگے ہمیشہ سبز رہےاور ایسا سبز کے جسکیکوئی مثال نہ ہوخدا کرے کے نہ خام ہو سر وقار وطن اور اس کے حسن کو تشوش ماہ وسا ل نہ ہو ہر ایک فرد ہو تہذیب و فن کا اوج و کمال کوئی ملول نہ ہو کوئی خستہ حال نہ ہوخدا کرے میرے ایک بھی ہم وطن کے لئےحیات جرم نہ ہو، زندگی وبال نہ ہو</p>
</body>

</html>

推荐阅读