强制将行高设置为固定值

时间:2018-11-25 15:47:14

标签: html css typography equal-heights

有什么办法 严格执行整个段落的行高或div?

我正在使用HTML + CSS进行书籍的排版精确印刷,并且我希望每一行的高度都相同,无论行内是什么

常见的问题是上标或文本的放大部分,在SO上的其他几个问题中(或多或少成功)了这些问题:

但是,这些解决方案的问题在于它们是局部的,只能解决特定的情况。我不想解决特定的问题,我想确保这些问题根本没有机会出现。我无法预先确定在整个文本中可能出现哪些不同类型的元素,因此我想确保行保持不变,而在出现问题的情况下,修复需要在其中添加行的特殊情况由于某些因素而增长。

所以以前的“解决方案”中存在的问题,尤其是:

  1. <sup>标签解决方案需要手动播放多种尺寸,直到正确为止。
  2. 第二个线程并不能真正解决问题。当部分文本足够大时,display:inline-block;overflow:hidden;vertical-align:top;的组合将不起作用,最终行会增加。

我尝试过的事情:

简而言之,请参见this JSFiddle

我尝试应用这些CSS规则的所有组合:

  • display: inline-block;(或仅inline
  • overflow: hidden;
  • vertical-align: top;
  • line-height: 1px;

但是,将文本大小更改为足够大仍会导致行变大。并且添加图像(例如,图形表情符号,可能比正常线条高度高1像素),将导致线条再次变大。

我想要的:

  1. 理想情况下,我想要一个可以确保这些问题根本不会出现的解决方案。 我不介意在顶部/底部或两侧修剪大元素
  2. 如果不可能(1),那么我至少需要一种方法来突出显示并清楚地看到发生这种情况的每一行。换句话说,如果 任何 行仅增加1px,即使在略读文本时,我也需要它来引起我的注意。

0 个答案:

没有答案