文本在跨度内左对齐

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，它需要保留在该位置。我想要的只是<span>，text-align: left这样行之间就不会形成大间隙。我怎样才能做到这一点？

我想将其全部保留为一个段落，因为它是弹性项目的一部分，并且有一个<h2>and<p>意味着它不会全部很好地工作！

谢谢。

Answer 1

问题是内联元素没有宽度并且不受text-align. 要解决此问题，您可以将 设为<span>，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>

然而，我真的建议在这里使用 to<p>标签，因为这就是它们的用途。另请注意，您使用两个<br/>标签将跨度与文本的其余部分分开，并且<p>标签隐式具有<br/>前后，因此切换到多个<p>不会更改间距。见下文：

p {
  text-align: center;
}

p.heading {
  text-align: left;
}

<a href="#" class="nostyle">
  <p 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.
  </p>
  <p>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>