如何在一首诗中

我想要显示的行诗歌使得行的端部对齐辩解行，以强调押韵，像这样：如何在一首诗中

<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>

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

任何想法？

来源

2014-12-27 Erel Segal-Halevi

您可以发布您的HTML？ – dfsq 2014-12-27 19:44:08

in line styles are nono – t3dodson 2014-12-27 19:48:37

我把我的代码放在上面。 – 2014-12-27 19:54:07

你可以做的是使用伪元素: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>

来源

2014-12-27 19:55:01 dfsq

魔术数量200px从哪里来？ – 2014-12-27 22:06:06

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

的问题是，被迫换行符，无论是p标记或标记br或CSS，不要理由打不好。

这里有一个技巧：使用标记，其中行以<br>，没有p标记结束。将该诗设置为行内块，以便它将采用其自然宽度（最长行的宽度）。然后使用JavaScript将其宽度设置为该值，并在每行上添加一个空白填充，将填充设置为100％，以便就其理由而言导致“自然”换行。它也会导致真正的空行。这会导致相当大的垂直间距，因此将线高设定为期望的实线高度的一半，例如，如果你想要1.2线高度，则为0.6。

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

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>');           
 
}

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

<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>

来源

2014-12-27 22:40:28

如何在一首诗中

回答

相关问题