Question

我有一段如下：

<a href="#" class="nostyle">
  <p>
    <span class="heading">Really long heading</span><br>
    <br>
    Lots of text that needs to be justified
  </p>
</a>

段落设置为text-align: justify，需要保留。我希望只有text-align: left，因此行之间不会形成大的间隙。我怎样才能做到这一点？

我希望将它全部保存为单个段落，因为它是弹性项目的一部分，并且<h2>和意味着它不会很好地工作！

感谢。

Answer 1

问题是内联元素没有宽度，不受text-align的影响。要解决此问题，您可以将设置为display: block，然后它应显示左侧对齐的文字，如下面的代码段所示。

注意：我在下面的代码段中将text-align: justify更改为text-align: center，以便更容易查看。

p {
  text-align: center;
}

p span {
  display: block;
  text-align: left;
}

<a href="#" class="nostyle">
  <p>
    <span class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum.</span><br>
    <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum. Aliquam posuere purus vitae justo mollis lobortis vel vitae sapien.
    Sed sapien nibh, tincidunt sed risus vel, vestibulum euismod augue. Quisque molestie vehicula magna, eget pulvinar augue pellentesque nec. Praesent venenatis risus placerat dapibus rhoncus. Aliquam lacinia, dolor non tristique congue, est nunc bibendum
    erat, id varius augue turpis id ipsum.
  </p>
</a>

然而，我真的建议在这里使用标签，因为这就是它们的用途。另请注意，您使用两个 标记将范围与文本的其余部分分开，标记前后隐含 ，因此切换为多个{{1不会改变间距。见下文：

<p>

p {
  text-align: center;
}

p.heading {
  text-align: left;
}

文本在范围内左对齐

1 个答案: