本质上,我想用浮动块元素实现“text-align: justify”的效果。我有许多块需要进行对齐。
即每行的水平间距不同,以确保每行长度相同。(非松散右边缘)。
是否有一种使用CSS的方法来实现这一点?如果没有,是否有适合的JS库可以实现这一点?还是说这是不可行的?
本质上,我想用浮动块元素实现“text-align: justify”的效果。我有许多块需要进行对齐。
即每行的水平间距不同,以确保每行长度相同。(非松散右边缘)。
是否有一种使用CSS的方法来实现这一点?如果没有,是否有适合的JS库可以实现这一点?还是说这是不可行的?
position:absolute; left:1em; right:1em
,让 CSS 基于某些定位父元素的偏移计算项目的宽度。float
是因为您想让一些块级项目流动,请在这些项目上使用 display:inline-block
而不是将其浮动。如果父元素具有 text-align:justify
,那么这应该会给您想要的效果。text-align:justify
的inline-block
的结果。
编辑:我已更新简单测试,以更清楚地显示左右边缘始终对齐,除了最后一行。#wrap:after {content:""; display:inline-block; width:100%}
来创建文本两端对齐的效果。这里有一个演示链接:演示。 - Phrogzhttps://jsfiddle.net/jc5qwyaw/
当我使用JavaScript创建DOM节点时,有一个示例:
https://jsfiddle.net/oa8yeudr/
如果您取消注释命令wrapDiv.appendChild(document.createTextNode(" "));
,则可以看到差异。可能的解决方案是在div节点后附加一个空格文本节点,如上例所示。