我有下面的HTML结构,在一个段落中有多个跨度:
<p><span>Hello</span><span>I</span><span>am</span>... </p>
问题是我无法证明该段的案文是正确的。text-align: justify-不起作用。
text-align: justify
jq6vz3qz1#
您可以将段落设置为弹性框,并使用space-between模拟对齐。
space-between
p { display: flex; justify-content: space-between; }
<p><span>Hello</span><span>I</span><span>am</span></p>
50pmv0ei2#
如果你想让它看起来像你在一个普通段落上得到的普通的对齐方式,那么你可以使用text-align:justify-在每个span上使用after伪元素放置空格:
p { text-align: justify; } span::after { content: ' '; }
<p><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span> </p>
2条答案
按热度按时间jq6vz3qz1#
您可以将段落设置为弹性框,并使用
space-between
模拟对齐。50pmv0ei2#
如果你想让它看起来像你在一个普通段落上得到的普通的对齐方式,那么你可以使用text-align:justify-在每个span上使用after伪元素放置空格: