如何在一首詩中

我想要顯示的行詩歌使得行的端部對齊辯解行，以強調押韻，像這樣：如何在一首詩中

<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

如何在一首詩中

回答

相關問題