Question

在排版中，通常认为每个段落的最后一行至少比其余段短一些是好习惯。我如何使用CSS实现这一目标？

Answer 1

这不是CSS的一项功能，但您可以使用CSS＆＃39; ::after伪元素解决此限制：

＆＃13;

p {
  text-align: justify;
  text-align-last: left;
}

p::after {
  content: '––––––––––––––––––––';
  visibility: hidden;
  white-space: nowrap;
}

＆＃13;

<p style='width: 380px'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore 
  magna aliqua. Ut enim ad minim veniam, quis nostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea 
  commodo consequat.  Duis aute irure dolor in 
  reprehenderit in voluptate velit esse cillum dolore eu 
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
  non proident, sunt in culpa qui officia deserunt mollit 
  anim id est laborum.</p>

＆＃13;

这将确保段落的最后一行比其他行短至少20en。如果该行中的内容太多，则最后一个单词将被分成下一行。

注意确保您的段落不包含任何尾随空格，因为这会导致在最后一个单词和伪元素之间允许换行。

Answer 2

在排版中，您可以预先确定许多内容 - 例如列宽和长度。在网络上，您无法了解哪些内容会动态或被更改 - 或者您的网站显示窗口的方式 - 可能会发生变化。如果你正在制作一个像经典海报那样的图形布局＆＃39;布局 - 对于某些断点，您可以使用<br>换行符 - 或者将副本拆分为不同的分隔符以创建您想要的外观。

使每个段落的最后一行比其余段落短

2 个答案: