Tips for toggling the visibility of the 'more' button based on the number of lines in a paragraph

While writing code using HTML, CSS, JavaScript, and Bootstrap, I encountered an issue with the "show more" link. The problem arises when there is only one line in the paragraph; I would like the "show more" link to be hidden and not displayed on the screen.

.container {
  width: 500px;
}

.container p.collapse {
  display: block;
  height: 47px;
  overflow: auto hidden;
}

.container p.collapsing {
  height: 47px;
}

.container p.show {
  height: auto;
}

.container a.collapsed:after {
  content: '+ Show More';
}

.container a:not(.collapsed):after {
  content: '- Show Less';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div id="module1" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample1">
    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
    beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
    Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham`enter code here`.
  </p>
  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1" id="module1">
  </a>
</div>

<div id="module2" class="container">
  <h3>Bacon Ipsum</h3>
  <p class="collapse" id="collapseExample2">
    Bacon ipsum dolor amet doner picanha tri
  </p>
  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2" id="module2">
  </a>
</div>

javascriptjqueryhtmlcssbootstrap-4

Answer №2

To achieve this, it is necessary to define the height and width of the container and calculate the number of lines accordingly.

 function countLines() {
   var el = document.getElementById('content');
   var divHeight = el.offsetHeight
   var lineHeight = parseInt(el.style.lineHeight);
   var lines = divHeight / lineHeight;
   alert("Lines: " + lines);
}

<body onload="countLines();">
  <div id="content" style="width: 80px; line-height: 20px">
    testline testline  testline  testline  testline  testline 
  </div>
</body>

If lines==1, then set a flag to false/true and hide your show more button.

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

Vue JS TypeScript component is unable to locate injected instance properties

Currently, I'm utilizing typescript alongside vue in my project. Within the app structure, there exists a service that acts as a global entity for all sub-components. I stumbled upon this native solution provided by Vue JS, which facilitates injecti ...

javascripttypescriptvue.jsvuejs2

Implementing the Tab key functionality without redirecting to the address bar

I recently integrated a Tab control into my project, but I'm encountering an issue where pressing the Tab key causes the address bar to jump when I try to press another key. This only happens after the Tab key functions correctly in the scene. How can ...

javascriptthree.js

Enabling graphs to extend to the full height of their parent container

As I construct a Dash layout using flexboxes, I've discovered their utility. However, an issue arises when attempting to adjust the size of charts to perfectly fit within a Dash card since I'm uncertain about the default dimensions of the graphs/ ...

cssflexboxplotly-dash

Utilizing ng-bootstrap within a rebranded module

I'm facing an issue with my nav-bar module that utilizes ng-bootstrap: import {NgModule, NgZone} from '@angular/core'; import { CommonModule } from '@angular/common'; import {NavigationComponent} from "./components/navigation/navi ...

javascriptangulartypescriptng-bootstrap

Automatically navigate through form fields using jQuery when pasting data

Enhancing the form filling experience by allowing users to prepare a text file in advance and simply copy/paste it into the form for quick submission. Integration of a feature that automatically moves to the next input field when a tab or newline character ...

javascriptjqueryhtmlforms

Sending information from a text area to a PHP script and receiving a response

While it may seem simple, I am still in the process of learning. I have a textarea where I input data that I want to send to a PHP script for decryption. Below is my HTML: <html> <form action="php.php" method="post"> ...

phphtml

Creating a form that is unable to be submitted

Can a form be created in HTML without the ability to submit, all while avoiding the use of JavaScript? I would like to utilize <input type="reset"> and have intentionally omitted an <input type="submit">, but there is still the possibility for ...

htmlforms

Making changes to HTML on a webpage using jQuery's AJAX with synchronous requests

Seeking assistance to resolve an issue, I am currently stuck and have invested a significant amount of time. The situation at hand involves submitting a form using the traditional post method. However, prior to submitting the form, I am utilizing the jQue ...

javascriptphpjqueryajax

How can we trigger a function once the API requests within a for loop have completed?

Within this for loop, a maximum of 'time' iterations are specified. With each iteration, a GET call is made to retrieve data that must be added to the obj object. I am seeking a method to determine when all 3 GETS have been completed along with ...

javascriptangularjsfor-looppromiseangular-promise

Is It Better to Consider Angular Elements as Building Blocks or Encapsulated Components?

When it comes to using element directives, I have noticed Angular element directives being used in two distinct ways: 1. Block Level Components In this approach, the element is styled with display:block, essentially making the element itself the componen ...

htmlangularjsangularjs-directivetagsdirective

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

Tips for creating Viewport dimensions in Tailwind CSS

As I delve into the depths of the official Tailwind CSS documentation, I come across a valuable nugget of information: Embrace w-screen to effortlessly extend an element to occupy the full expanse of the viewport. Initially, w-screen proves handy as I b ...

csstailwind-css

CSS technique for adjustable column width in HTML tables

Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only. Within my report, there is a table utilized for accounting purposes featuring 11 columns: The first column serve ...

htmlcsshtml-table

Sending Data from Dialog Box1 to Dialog Box2 in ASP.NET Using JavaScript

Is there a way to successfully transfer a value from Modal1 to Modal2? I am facing an issue where Modal1 opens Modal2 to receive a necessary value, but I keep encountering the error message: "Uncaught TypeError: Cannot read property 'click' of nu ...

javascriptasp.net

What solution can I find for this seemingly persistent issue with Webkit checkbox rendering?

The issue with rendering can be observed at the following link: http://jsfiddle.net/2FZhW/ <input id="box" type="checkbox"> <button id="chk">Check</button> <button id="unchk">Uncheck</button> function check() { $("#box" ...

javascriptjquerycheckboxwebkitprop

Uncovering the media:thumbnail in an RSS feed using Scrapy's CSS selector

I am currently working on parsing an RSS feed that includes image URLs. The XML file structure is as follows: <item> <title>Item Title Goes Here</title> <link>https://www.google.com</link> <media:thumbnail url="https:/ ...

pythoncssscrapy

Ways to deactivate the hover effect on a bootstrap icon

I have incorporated this particular icon definition: <svg class="bi bi-arrow-repeat arrow-success" id="id-topdashboard-icon-refresh" width="28" height="28" viewBox="0 0 20 20" fill="currentColor&quo ...

bootstrap-4hovericonsdisable

Discovered a critical vulnerability that requires your attention. Execute `npm audit fix` to resolve the issue, or use `npm audit` for more information

After attempting to install mysql using 'npm install mysql', I encountered an error message stating: "found 1 critical severity vulnerability run npm audit fix to fix them, or npm audit for details" Following this, I proceeded with 'npm au ...

htmlnode.jsdatabaseamazon-web-servicesnpm

Error: The reset function cannot be executed on $(...)[0]

Purpose My aim is to clear a form once it has been successfully submitted. Problem Upon submitting the form, I encounter the error message in my console: Uncaught TypeError: $(...)[0].reset is not a function When examining the content before resetting, ...

javascriptruby-on-railsajaxsimple-form

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example: <iframe ng-src="http://www.example.com/?name={{test}}"> </iframe> The variable test ju ...

htmlangularjsiframe