What are some ways I can adjust line-height without changing the height of the cursor?

When working in a contenteditable div, I am utilizing line-height to create some spacing between lines. The following example illustrates 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 height of the caret increases when moved to the second line. Despite the presence of various spans in the div with different line heights, the caret height remains unaffected.

A similar issue is observed in Safari. However, in Firefox, the caret height corresponds to the font size rather than the line height.

Are there any suggested solutions to address this problem in Chrome and Safari?

csshtml

Answer №1

A <span> serves as a versatile inline container for phrasing content and therefore does not have a specific height.

By setting all <spans> to have display:inline-block, the caret will adjust its size 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>

Answer №2

Consider utilizing padding over line-height and switching display to inline-block:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting CSS "::Before" to work in my HTML code - any solutions?

I've been struggling to make use of the ::before pseudo-element in CSS for a hover effect. Despite going through various tutorials on YouTube, I can't seem to get it to work properly. I'm not sure why this isn't working as expected. ...

htmlcss

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

htmlcssruby-on-rails-4helpndoc

What steps should I take to ensure that my Ngrok domain is functioning properly?

Screenshot of Endpoints I've been facing challenges while attempting to get my NGROK domain operational. Despite completing all the necessary setup steps and successfully running multiple tunnels simultaneously with NSSM, as well as having a business ...

javascriptphphtmlnode.jsngrok

Stunning CSS Image Showcase

When hovering over my image gallery, it works fine. However, I would like the first image in the gallery to automatically appear in the enlarged section instead of displaying as a blank box until hovered over. <!DOCTYPE html> <html lang="en"> ...

htmlcss

Styling a fixed sidebar in Vue.js

I am currently working on a layout design that includes a fixed sidebar on the left side, positioned beside a container with its own grid structure. Utilizing Vue.js means each template contains <div> elements where I attempt to incorporate additiona ...

htmlcssvue.jsgridsidebar

What techniques does Google use to craft mobile-friendly fixed backgrounds and parallax content within iframes?

Currently, I am working on a test that involves utilizing an intersectionobserver in conjunction with iframe postMessage to adjust the background image in a translate3d manner within the iframe. However, this method is causing significant jitter and potent ...

javascriptcssiframeads

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss

Trouble with updating scope values in the view within IONIC 1 and AngularJS

I recently implemented a feature to save the two most recent login details. The functionality works correctly, but I'm facing an issue where my view only updates upon refresh even though the scope values are being updated. I've tried using $scop ...

htmlangularjsionic-frameworkscope

Updating a div's border using JavaScript

I recently generated a div element dynamically through code. var Element; Element = document.createElement('div'); My goal now is to modify the right and bottom borders to "#CCCCCC 1px solid". I aim to achieve this without relying on any exte ...

javascriptcssborder

Should buttons be wrapped based on the text of the link?

I'm struggling to include buttons in my design but I can't seem to achieve the desired outcome. The image below illustrates what I am attempting to create but have been unsuccessful in replicating: https://i.sstatic.net/CnYLV.png However, the ...

htmlcss

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

javascripthtmlcssbootstrap-4ejs

Is it possible to trigger a JavaScript function and an AJAX command with just one button click?

I'm looking to achieve a specific functionality using one button within a form. The requirements are as follows: 1) When the button is clicked, it should trigger a JavaScript function that performs animations such as fadeout and fadein. 2) Following ...

javascripthtmlajaxjsfxhtml

Attention: The index value is not defined:

This is the main page with a date picker that links to index.php, where the data table is located. Everything works fine when I select a date, but if I make any changes on the index.php page or try to access it directly, I encounter this error: Notice: ...

phphtmlsql

Achieving full table height with a parent having a min-height requirement

Encountering a seemingly straightforward issue where I am unable to make an inner div 100% height of the parent div, which is set with min-height 70vh. My goal is to have the table inside be 100% height and content vertically aligned. It currently works if ...

csstwitter-bootstrap

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

javascriptphpjquerycssajax

Methods to prevent ExtentReports from transforming HTML references in your Selenium logs into real HTML code

Having an issue with ExtentReports 4 for .Net and HTML V3 reporter. Whenever a test fails, the failure message is displayed in the report. However, if the failure message contains an HTML tag, it gets converted to actual HTML on the report, causing layout ...

htmlseleniumnunitextentreports

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

Media query causing margin on previous div due to padding on following div

Currently experimenting with media queries and trying to make my tags span 100% the width of the device. However, I'm noticing a margin on the right side of my image. I suspect it's due to the padding on the div above, as when I set the padding t ...

htmlcssmedia-queries

React DOM's offsetHeight prior to rendering

I am struggling to figure out how to position a React DOM element based on its offsetHeight. The issue is that I cannot determine the offsetHeight of an element that hasn't been created yet (so the height cannot be passed as a parameter to the render ...

javascriptcssreactjs

What is the process for incorporating CSS, JavaScript, and images into a Django project?

Within the static folder, I have created a CSS file called resume.css with the following structure: static css resume.css In my settings.py file, I did not make any changes to the static code. I have referenced the index.html file in my vie ...

pythonhtmlcssdjangodjango-static