文本在span标记中对齐

Question

我写了一个程序来显示阿拉伯语文本。 我使用两种字体：

1：阿拉伯人的字体

2：没有文字的字体

我可以使用此方法单独更改每种颜色。我使用两个带有相同ID的span标签来显示带有阿拉伯语的文本和带有阿拉伯语的文本。 结果：

每个人都可以。 但是当我改变text-align来证明它不合适时，文本就会消失。 结果：

代码的一部分：

<span class=ThuithQA id=1-0> <font  size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithE> 
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font></span><span class=ThuithQA id=1-1> <font  size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font></span>

我想证明文字是正确的。

Answer 1

如果每节经文都在一个单独的span中，那么按照下面的说明设置你的css：

<强>编辑：

<强> CSS

span{
    display:block;
    text-align:justify;
    direction: rtl; /* Direction of text right to left */
}

参见此演示：

http://jsfiddle.net/rathoreahsan/mSEj9/1/

Answer 2

如果要显示所有文本对齐，则需要在所有范围内使用包装器和此样式：

.wrapper {
    direction: rtl;
    text-align: justify;
}

你不能在每个范围内对齐文本对齐，因为它们没有整行文字+一些符号

Answer 3

尝试设置要显示的范围：阻止或设置宽度

Answer 4

尝试text-align向右。

span{
  display:block;
  text-align:right;
}

Answer 5

我可以用这段代码解决我的问题： 我把阿拉伯语和文本放在一个单独的div中 并设置div

posation:absolute

并设置正文

text-align:justify;

代码的一部分

<div style=" position:absolute;"> 
<span class=ThuithQA id=1-0> 
<font  size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font> 
</span > 
<span class=ThuithQA id=1-1> 
<font  size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font> 
</span >  
</div> 

<div style=" position:absolute;"> 
<span class=ThuithE> 
<font color=Red size=5>بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ (١)</font> 
</span > 
<span class=ThuithE> 
<font color=Red size=5>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ (٢)</font> 
</span > 
</div>

结果：