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

2023年2月6日 244次阅读

我正在使用
HTML和CSS发布一些诗歌,这些诗歌结合了特定的,明确的换行符和理由.所以,我需要实现像这样的图像,每一行都在它显示的位置被完全打破：

《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>

最佳答案 您可以将br转换为span,以在文本片段之间插入空行.

然后你可以将线高减少到大约一半,因此跨度不会在一条完整线的高度上扩展.

将合理宽度设置为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>
点赞