Question

我想在行中显示诗歌，使行的两端对齐，以强调押韵，如下所示：

＆＃13;

<div style='text-align:justify'>
<p>aaaa aaa aaaaaa aa aaa aaaa</p>  
<p>aaaa aaa aaaaa aaa aaaa aaaa</p>  
<p>aaa aaaa aaaa aaa aaaaa</p>  
<p>aa aaaaa aaaa aaaaa aaaaa aaaaa</p>  
</div>

＆＃13;

但这不起作用 - 很可能是因为每一行都被视为一个单独的段落。

有什么想法吗？

Answer 1

你可以做的是使用伪元素:after使p文本不是最后行的文本，这样它才能正确对齐：

div {
    text-align: justify;
    background: #EEE;
    width: 200px;
}
div p:after {
    content: '';
    display: inline-block;
    width: 100%;
}

<div>
    <p>Lorem ipsum dolor sit amet</p>
    <p>Ruculis merti asani.</p>
    <p>Tedrima ergi nihil et capet,</p>
    <p>Puritumus lasi ce lani.</p>
</div>

Answer 2

我假设您想要证明左侧和右侧的线条是正确的。当段落很长时，这不能以简单的方式实现，因此每一行都是其块的最后一行，因此无法调整。有一个特定于IE的属性用于设置最后一行的对齐和一些建议的标准工具，到目前为止没有浏览器支持。所以我们需要一些技巧。

问题在于强制换行符，无论是使用p标记还是br标记，还是使用CSS，都不能很好地证明理由。

这是一个技巧：使用标记，其中行以<br>结束，没有p标记。将诗设置为内联块，以便它将采用其自然宽度（最长线的宽度）。然后使用JavaScript将其宽度设置为该值，并且还为每一行添加空白填充，将该填充设置为100％，以便在理由方面引起“自然”换行。它还会在真实线之后产生空行。这导致相当大的垂直间距，因此将线高设置为所需实线高度的一半，例如，如果你想要1.2线高，则为0.6。

这是一个丑陋的黑客，我希望有一个更好的...

＆＃13;

window.onload = function() {
  var poem = document.getElementById('poem');
  poem.style.width = poem.offsetWidth + 'px';
  poem.innerHTML = poem.innerHTML.replace(/<br>/g, 
    '<span class=fill></span>');                                          
}

＆＃13;

#poem {
  text-align: justify;
  background: yellow; /* just to show the block */
  display: inline-block;
  line-height: 0.6;
}
.fill {
  display: inline-block; 
  width: 100%;
}

＆＃13;

<div id=poem>
aaaa aaa aaaaaa aa aaa aaaa<br>  
aaaa aaa aaaaa aaa aaaa aaaa<br>  
aaa aaaa aaaa aaa aaaaa<br>  
aa aaaaa aaaa aaaaa aaaaa aaaaa<br>
et finis coronat opus.<br>
</div>

＆＃13;

如何证明诗中的行

2 个答案: