如何在不影响插入符高度的情况下使用行高? [英] How can I use line-height without affecting caret height?

问题描述

在一个内容可编辑的div中，当我有多行时，我使用line-height添加一些行空间.这是显示问题的示例div:

In a contenteditable div I'm using line-height to add some line space when I have multiple lines. This is a sample div showing the issue:

<div style="padding: 50px; width: 90px; line-height: 2em;" contenteditable="true">
  line height line height line height
  <span style="line-height: 1em; color: Red;">line height</span>
  <span style="line-height: 10px; color: Orange;">line height</span>
  <span style="line-height: normal; color: Green;">line height</span>
  <span style="line-height: .5em; font-size: .5em; height: 5px; color: Blue;">line height</span>
</div>

在Chrome中，将插入符移动到第二行时，插入符的高度会变大.我在div中添加了一些跨度，这些跨度具有不同的行高，但这根本不影响插入符号的高度.

In Chrome the caret height gets larger when you move the caret to the second line. I've added some spans in the div with different line heights, but that doesn't affect the caret height at all.

在Safari中，我遇到了同样的问题.在Firefox中，它可以按预期工作，即，插入符高度与字体大小匹配，而不与行高匹配.

In Safari I see the same problem. In Firefox it works as expected, i.e. the caret height matches the font size, not the line height.

在Chrome和Safari中有什么方法可以解决此问题?

Is there any way to get around this problem in Chrome and Safari?

推荐答案

< span> 是用于表示内容的通用内联容器，并且(因此)没有高度.

A <span> is a generic inline container for phrasing content and (consequently) has no height.

如果您将所有< spans> 声明为具有 display:inline-block ，则插入符的大小将相应地调整:

If you declare all <spans> as having display:inline-block the caret will resize, accordingly:

div {
padding: 50px;
width: 90px;
line-height: 2em;
}

div span {
display:inline-block;
}

div span:nth-of-type(1) {
line-height: 1em;
color: Red;
}

div span:nth-of-type(2) {
line-height: 10px;
color: Orange;	
}

div span:nth-of-type(3) {
line-height: normal;
color: Green;	
}

div span:nth-of-type(4) {
line-height: .5em;
font-size: .5em;
height: 5px;
color: Blue;
}

<div contenteditable="true">
  line height line height line height
  <span>line height</span>
  <span>line height</span>
  <span>line height</span>
  <span>line height</span>
</div>

这篇关于如何在不影响插入符高度的情况下使用行高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！