CODEWITHSUNDEEP
csshtml
hjhlarsen
hjhlarsen

Reputation: 157

How can I use line-height without affecting caret height?

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>

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.

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.

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

Upvotes: 3

Views: 1748

Answers (2)

Rounin
Rounin

Reputation: 29511

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

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>

Upvotes: 2

Michał Perłakowski
Michał Perłakowski

Reputation: 92709

Try using padding instead of line-height and change display to inline-block:

<span style="padding: 10px 0; display: inline-block;">padding</span>

Upvotes: 1

Related Questions