有没有办法严格执行整个段落或 div 的行高?
我正在使用 HTML+CSS 进行精确排版的书籍打印,并且我希望每一行都具有相同的高度,无论行内是什么。
常见的问题是上标或文本的放大部分,这些问题(或多或少成功地)在此处的其他几个问题中得到解决,关于 SO:
但是,这些解决方案的问题在于它们是部分的并且仅修复特定情况。我不想修复特定的问题,我想确保这些问题根本没有机会出现。我不能事先确定整个文本中可能会出现哪些不同类型的元素,所以我想确保线条保持不变,相反,如果出现问题,请修复我需要线条增长的特殊情况,因为一些元素。
所以以前的“解决方案”中的问题,特别是:
<sup>
标签解决方案需要手动播放多种尺寸,直到正确为止。- 第二个线程并没有真正解决问题。当文本的一部分变得足够大时,没有 和 的组合
display:inline-block;
会overflow:hidden;
做vertical-align:top;
——这条线最终会变长。
我试过的:
简而言之,请参阅此 JSFiddle。
我已经尝试应用这些 CSS 规则的所有组合:
display: inline-block;
(或只是inline
)overflow: hidden;
vertical-align: top;
line-height: 1px;
但是,将文本大小更改为足够大仍然会导致行变大。添加图像(例如,可能仅比正常线条高度高 1 个像素的图形表情符号)将再次导致线条变大。
我想要的是:
- 理想情况下,我想要一个解决方案来确保这些问题根本不会出现。我不介意修剪顶部/底部或两侧的大元素;
- 如果 (1) 不可能,那么我至少需要一种方法来突出显示并清楚地看到发生这种情况的每一行。换句话说,如果任何一行只高出 1px,即使只是浏览文本,我也需要它来引起我的注意。