内联元素上的 CSS 行高

Posted 2023-05-09

【中文标题】内联元素上的 CSS 行高

【英文标题】：CSS line-height on inline element

【发布时间】：2018-02-19 22:05:37

【问题描述】：

是否可以更改段落中的行高？

例如，如果我有一个段落或 div 或标签设置为特定的字体大小和行高，并且需要该文本的最后一部分更小，我可以在 p 或 div 内做一个跨度和更改字体大小就好了，但是对行高的任何调整都不起作用。

我知道我可以将跨度更改为块或内联块，但随后会将文本包装在该段落下。如果可能的话，我想保持文本内联运行。

示例@https://jsfiddle.net/fye8bcjx/

p 
  font-size: 18px;
  line-height: 2;


span 
  font-size: 12px;
  line-height: 1;

---
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  <span>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
        </span>
</p>

【问题讨论】：

好吧，你的问题中已经有了答案......但真正的问题是你为什么想要这个？

您如何期望在同一行文本上有 2 个不同的行高？这将如何运作？

将background 添加到您的跨度以查看其line-height：jsfiddle.net/fye8bcjx/13 由于默认vertical-align:baseline，它似乎没有变化

原因是在表单标签上有一些澄清文本。像<label>Where will you be staying while in town? <span>please provide an address and local phone number</span></label> 一样，跨度部分是较小的文本，但是当它换行时，行高使它远离上面的文本。这有意义吗？

@TemaniAfif 例如，如果您正在制作标签块列表。大量的用例。看我的回答:)

【参考方案1】：

块容器上的行高（在本例中为<p> 元素）给出了它包含的行的最小行高。因此，如果您希望较小的文本靠得更近，则需要避免为此设置较大的行高。相反，使用内联元素的行高：

p 
  font-size: 18px;
  line-height: 0;


span.primary 
  line-height: 2;


span.secondary 
  font-size: 12px;
  line-height: 1;

---
<p><span class="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</span>
  <span class="secondary">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
        </span>
</p>

【讨论】：

嘿，这很好，但是看看如果有更多的文本导致第三行换行第二跨度会发生什么。当第一个跨度的结尾和第二个跨度的开头在同一行时，就好像整个块最终有 3 个不同的行高。嗯。 jsfiddle.net/fye8bcjx/27

没关系 - 只需调整行高和字体大小，使其更具可读性和更少的示例导向就可以了。所以谢谢你的解决方案！！！

【参考方案2】：

[更新] 这个答案确实没有解决 OPs 问题。我会寻找其他解决方案。

是的，当然。 内联块正是为此。它具有块的大部分属性，但作用类似于内联元素。

p 
  font-size: 18px;
  line-height: 2;

span 
  font-size: 12px;
  line-height: 1;
  display: inline-block; /* <=== Inline block to the rescue. */

【讨论】：

你清楚地阅读了这个问题 :) i know i can just change the span to a block or inline-block, but then that wraps the text under that paragraph. i'd like to keep the text running inline if possible. ... 运行更多内容的 sn-p，你会看到会发生什么;)

啊，明白了。你说的对！让我看看我能不能带点东西回来:)