How to hide/show 'more' button if there is only one line in paragraph

Question

I'm writing code with the help of HTML,CSS,js and bootstrap . In my code, the "show more" link is working but the question is that when there is only one line in the paragraph i want that the "show more" link is hide and can't be display on 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>

For this you can add one more check that will check for no of character in paragraph if the no of character exceed more than a line then show your button. Example: https://www.viralpatel.net/dynamically-shortened-text-show-more-link-jquery/ — James, Sep 25 '19 at 09:33
[This SO Solution](https://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i) might help you. With the function in the example you can count how many lines are in a paragraph — Ram Segev, Sep 25 '19 at 09:38
You may add hidden paragraph with same text and no height limitation and check its height, if it is more then some value (depends on line height etc) then show button, if not then assume that it is only one line and you can hide button. That will work also if you allow user to shrink page width so paragraph height increase, if you just limit it by some character amount, then it may not work if user shrink browser window. — maximelian1986, Sep 25 '19 at 09:41

score 0 · Answer 1 · answered Sep 25 '19 at 09:43

0

jQuery shorten.js is good plugin for this, try this. don't forget to include jquery on your page.

https://www.jqueryscript.net/text/Read-More-Less-Plugin-jQuery-Shorten.html

answered Sep 25 '19 at 09:43

irzum shahid

181
2
12

score 0 · Answer 2 · answered Sep 25 '19 at 10:02

For that we have to specify the height and width of the container and calulate the lines like this

 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 false/true and hide your show more button

How to hide/show 'more' button if there is only one line in paragraph

2 Answers2