Ways to identify if content is partially concealed due to reaching max-height

Trying to figure out if some content fits within its max-height limit, but the line-height is throwing off my calculations.

This is how I'm trying to determine if the content is partially hidden:

var partiallyHidden = content.scrollHeight > content.offsetHeight;

However, it seems like the line-height of the content is impacting the accuracy of this code. What role does line-height play in relation to scrollHeight/scrollOffset? Are there other factors I need to take into account?

Check out the full example here.

Also, keep in mind that the solution needs to be compatible with IE9+.

Additional notes:

  • I came across the formula 
    content.scrollHeight > content.offsetHeight
    in a Stack Overflow post.
  • The code from a related question on Stack Overflow (link) gave me the same error. The use of clientHeight versus scrollOffset is confusing in terms of the result it produces.
javascripthtmlcss

Answer â„–1

The font baseline is discussed in an article on Smashing Magazine:

"The CSS line-height property does not consider baseline, with each line of text placed approximately in the middle of the element's total height."

Furthermore, a Stack Overflow answer notes:

"Some fonts do not follow the standard ascender/descender rules. For example, icon fonts may align descenders differently or calligraphic fonts may extend below the baseline."

Therefore, at a line-height: 12px with a font-size: 12px, the font may not align properly due to characters descending below the baseline. Increasing the line-height resolves this issue.

To address low line-height problems, adding two <br/> tags can create more space at the bottom of the text, preventing hiding issues.

It is important to note that font height is determined by line-height, not just the font size as demonstrated in this JSFiddle.

Testing with different fonts revealed similar alignment issues.

In conclusion, if(line-height <= font-size), content may be hidden. A suggested solution could involve adjusting the line-height and additional spacing based on these values:

if(line-height === font-size) {
    var mustShowButton = content.scrollHeight > content.offsetHeight + 1;
else if(line-height < font-size) {
    var mustShowButton = content.scrollHeight > content.offsetHeight + (font-size - line-height); 
} else {
    var mustShowButton = content.scrollHeight > content.offsetHeight
}

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

Using jQuery to retrieve the content of a textarea and display it

I need help finding the right way to read and write to a Linux text file using JavaScript, jQuery, and PHP. Specifically, I want to retrieve the value from a textarea (#taFile) with jQuery ($("#taFile").val();) and send it via $.post to a PHP script that w ...

phpjavascriptjqueryfile

Observing modifications in the $route object - Vue Router

I am currently working on a small CRM project. Within the login form, I have implemented a component that displays an alert message when the email or password entered is incorrect. Interestingly, even after correcting the information and logging out, the m ...

javascriptvue.jsvue-router

"What is the best way to verify the presence of a number in my arguments using Node.js and Discord.js

const Discord = require('discord.js'); var connection = require('../index.js'); exports.run = (bot, message, args) => { var id = args[0]; var nome = args[1]; var sobrenome = args[2]; let verificarId = (id) => ...

javascriptnode.jsdiscord.jsnumbers

Button to close on the right side of the navigation bar in Bootstrap version 4

Attempting to customize a navbar with Bootstrap 4, I have implemented the following modifications: Positioned the Collapse button on the right-hand side Separated the BrandName from the collapse area to ensure it remains on the left side Below is the co ...

htmlcsstwitter-bootstrapbootstrap-4

Merging together two arrays results in a cohesive sentence

Just starting out with javascript and struggling to merge arrays. I attempted to reverse words manually, but ended up with unexpected results. Here is the code snippet: function reverseString(kata) { let currentString = kata; let newString = '& ...

javascriptarraysreverse

EmberJS: Learning how to create a record with a belongsTo relationship

My issue involves using Posts and Comments to explain my problem. In my post_controller, I am trying to create a new record for a comment related to the current post. What is the recommended way to achieve this in Ember? The relationship between Post and ...

javascriptember.jsember-data

Visual Latency when Quickly Toggling Between Images in Succession

I have a series of 50 images that need to be displayed sequentially inside a div. The time interval between displaying each image is initially set at 750 milliseconds and decreases with each subsequent image. To ensure all images are loaded before the an ...

javascriptjqueryhtmlcssimage

What is the best way to extract the event time when a user clicks on an event in fullcalendar?

Is there a way to extract only the time from an eventclick event in fullcalendar? Currently, I am receiving details about the event including date and time. How can I specifically retrieve just the time (e.g. 6:00:00 am)? You can find the code snippet tha ...

javascriptjqueryfullcalendarmomentjs

Chrome does not recognize the 'position: fixed' style attribute

Encountered an issue in Chrome where the position:fixed property does not behave as expected. While this code works fine in Firefox and Safari, it seems to have a glitch in Chrome (69.0.3497.100). When scrolling, the blue div moves and reveals the green ba ...

htmlcssgoogle-chromecss-position

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

htmlcssreactjsiconsstyled-components

manage data from multiple users using node.js and socket.io

After extensive searching on this site and across the web, I have yet to find a satisfactory answer to my query. I am in the process of developing a small multiplayer web game using node.js + socket.io for the back-end. To handle new users, I have written ...

javascriptnode.jssocket.io

Is it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...

javascriptjqueryhtmljquery-ui

What is the most efficient way to transmit JSON data from a browser to a REST endpoint via Node.js, specifically in gzip format?

Currently working with node.js and express, I have a home page that hits my REST endpoint (PUT) after loading to send some JSON data. The data is not gziped when sending to the endpoint, but I want it to be in gzip form once it reaches the endpoint. Is thi ...

javascriptnode.jsgzipbody-parsercontent-encoding

What is the best way to extract and manipulate a parameter from the URL within a Route's path before rendering the child component?

<Path URL="/profile/:username"> {!user ? <Redirect to="/" /> : <User _info={/* manipulate the :username data first before passing it here */ } />} </Route> This specific r ...

javascriptreactjs

Transfer an object for reusability in a different JavaScript file without utilizing the default operator

I have a scenario where I have two files organized in a tree structure that defines an object. The first file is called common.js. export default { table: { actions: { save: 'Save', delete: 'Delete', update: ...

javascriptobjectexport

The Challenge of Passing JavaScript Variables to SQL Queries in PHP Using AJAX

I am facing an issue with my PHP and MySQL setup. I have designed a PHP page with two sections positioned side by side. The left section displays a list of categories generated from a MySQL query, while the right section is intended to display subcategorie ...

javascriptphpjquerymysqlajax

The functionality of res.render() is effective in certain scenarios but not in others

In the code below, I'm curious why res.render('home'); works, but res.render('update'); does not. This code is utilizing Node.js, Express, and Handlebars. directory structure myApp │ ├───app.js │ ├┠...

javascriptnode.jsexpresshandlebars.js

What is causing my 'if' statement to only execute on the second trigger of the function?

By utilizing Node JS, Electron, and the FS module, I have developed a function in a separate .js file that is invoked in my HTML as a script and activated by a button with onclick="ReadSerials()". Interestingly, it consistently requires two butto ...

javascriptnode.jsif-statementelectronnode.js-fs

What steps are involved in creating a user form using react and redux?

Upon the initial loading of my application, it retrieves user data from the server and displays the information in an AppBar (material-ui): displayProfileLink () { const {user} = this.props; if (!user.name) { return <CircularProgress styl ...

javascriptreactjsformsredux

Adjusting the target of the anchor dynamically

I have a WordPress theme with a built-in widget that allows you to insert social media links into sidebars or headers. All the social media links are contained within a div with a unique class called social-links. I want to add target="_blank" to all anc ...

jqueryhtml