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

在排版时，通常认为每段的最后一行至少比其他段落短一些。我如何使用CSS来实现这一点？使每个段落的最后一行比其他段落短

2017-08-17 Nuvanda

这不能作为CSS的功能，但是你可以使用CSS的::after伪元素这样的解决这一限制：

p { 
 
    text-align: justify; 
 
    text-align-last: left; 
 
} 
 

 
p::after { 
 
    content: '––––––––––––––––––––'; 
 
    visibility: hidden; 
 
    white-space: nowrap; 
 
}

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

这将确保，即最后一行的行距至少比其他行少20行。如果该行中的内容太多，则最后一个单词将被分解到下一行。

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

来源

2017-08-17 15:44:05 Nuvanda

如果我继承了一个使用这种技术的项目，我会立即删除它。 – sheriffderek

在排版中，您可以预先确定许多事情 - 如列宽和长度。在网络上，您无法知道哪些内容是动态的或者需要更改的 - 或者您网站的窗口显示方式 - 可能会发生变化。如果您正在处理像传统“海报”布局那样的图形布局 - 对于某些断点，则可以使用<br>换行符 - 或者将副本拆分到不同的分隔符中以创建所需的外观。

来源

2017-08-17 16:04:01 sheriffderek

请注意，如果您有能力预先确定换行符，这总是更好的解决方案，因为它可以让您使用更好的换行算法，而不是浏览器使用的贪婪换行。 – Nuvanda

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

回答

相关问题