jquery - 如何使用 jquery 格式化阿拉伯语诗歌？

Question

这是在动态生成的页面中输入一首经典阿拉伯诗歌。

Lorem ipsum dolor*** sit amet, consectetur 
<br>
adipiscing elit. Morbi*** sagittis consequat
<br>
turpis id dictum. Sed*** non ipsum id massa
<br>
cursus fermentum ***vitae rhoncus nunc.
<br>
In sodales dolor ***sed orci sagitti

输出在浏览器中应该是这样的:

--------    ----------
--------    ----------
--------    ----------

请看图片 ( http://s4.postimg.org/bc1ahxofh/vvv.jpg )

1-星号应替换为空格 2-每一行都分为两部分(在星号之后)，这些部分应该看起来垂直对齐。

我首先厌倦了使用这段代码将每一行分成三部分

$('div.poemContainer').html(function (index, text) {
this.innerHTML = text.replace(/\*+/g, "<span class='space'></span>");
$(this).contents().filter(function() {
return this.nodeType == 3;  
}).wrap('<span class="line"></span>');
});

然后我尝试使用 css 使部件垂直对齐 span.space{ 显示:内联 block ； 宽度:20px；

span.line
{ width:45%;
float:left;
text-align:justify
}

但没有成功，文本是合理的，但每个部分仍然有不同的宽度，因此它们不能垂直对齐。那么我该如何解决这个问题呢？

Answer 1

尝试将 display: inline-block 添加到您的 span.line CSS 声明并删除 float 。如果仍然不够对齐，您可以将其设置为等宽字体(如 Courier New 或 Monaco)以获得等宽字符。