text-align:justify 最后一行没作用

如何让内容两端对齐?text-align:justify 很强大。
不过,当应用的时候,难免有一些小脾气。

当我加上text-align:justify的时候,第一行内容对齐了,在这里是0px;可是第二行并没有应用这个属性。
如何解决?看了鑫大牛的思路真是受益匪浅。

第一种情况:让最后一行垂直左对齐,即最后一行有左浮动的效果。

(垂直对齐左对齐)重点: 在父元素内最后多加入多个div,设置样式为height:0,padding:0,overflow:hidden 。复制个数一般就是每行元素的列表个数。其中的 (不可缺)。
第二种情况:最后一行占满整行两端对齐。
 最终效果:

(两端对齐)重点:在父元素内最后多加入一个div,设置样式为height:0,overflow:hidden ,width:100%,display:inline-block。

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

Meet Mantine: A TS-Based Open-Source React Components Library

Meet Tippy.js: The Complete Tooltip Popover Plugin