html - 如何使用 CSS 组合显式换行符和对齐文本

Question

我正在使用 HTML 和 CSS 发布一些诗歌，这些诗歌结合了特定的、明确的换行符和理由。所以，我需要实现类似这张图片的效果，每条线都在它显示的地方被打断:

但是 text-align: justify 在存在换行符时似乎不起作用，例如:

<p style="text-align: justify;">
Bacon ipsum dolor amet andouille<br />
meatloaf rump meatball, shank ribeye<br />
jowl turkey swine. Drumstick tri-tip<br />
brisket, cupim tongue andouille chuck<br />
spare ribs. Bresaola cow drumstick,<br />
tail boudin ground round sausage<br />
kielbasa prosciutto turkey andouille<br />
jowl spare ribs. Short ribs brisket.<br />
</p>

Answer 1

您可以将 br 转换为 span 以在文本片段之间插入空行。

那么您可以将 line-height 减少到大约一半，这样 span 就不会扩展到整行的高度。

将合理的 width 设置为 p

span {
  /* add an extra line */
  display: inline-block;
  width: 100%;
}
p {
  /* reduce line-height to half to include spans */
  line-height: 0.6em;
  /* set a reasonnable width */
  width: 15em;
  text-align: justify;
}

<p>
  Bacon ipsum dolor amet andouille<span></span>
  meatloaf rump meatball, shank ribeye<span></span>
  jowl turkey swine. Drumstick tri-tip<span></span>
  brisket, cupim tongue andouille chuck<span></span>
  spare ribs. Bresaola cow drumstick,<span></span>
  tail boudin ground round sausage<span></span>
  kielbasa prosciutto turkey andouille<span></span>
  jowl spare ribs. Short ribs brisket.<span></span>
</p>