我假設你想要證明左邊和右邊的行。當段落很長時,這不能以簡單的方式實現,因此每一行都是塊的最後一行,因此不會被調整。有一個特定於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>
您可以發佈您的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