Detecting content overflow in CSS

Question

I'm trying to create a link that gets displayed on a div when the content exceeds a certain threshold that will hide the rest of the content until the user clicks on a "read more" link, which will cause the rest of the content to be displayed. I have gotten this to work for long content, but I'm having trouble figuring out how not to display it when the content is so short that it doesn't need to be truncated. Take a look at the demo to see what I'm talking about. I'd like the "read more" link not to show up on the second div cluster.

$(function() {
  $("#toggle").click(function() {
    $("#content").toggleClass("truncated");
    $("#linkArea").hide();
  });

  $("#toggle2").click(function() {
    $("#content2").toggleClass("truncated");
    $("#linkArea2").hide();
  });
});

.truncated {
  max-height: 63px;
  overflow: hidden;
}
.content {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 125%;
  color: #3F4549;
  margin: 10px 0 10px 0;
  padding: 0;
  line-height: 21px;
  font-weight: 300;
}
.body {
  position: relative;
}
.body .read-more-fade {
  position: absolute;
  padding: 2px;
  bottom: 0; right: 75px;
  width: 50%;
  text-align: right;
  background-image: -webkit-gradient(linear,left,right,color-stop(0, rgba(255, 255, 255, 0)),color-stop(1, white));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white);
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), white);
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), white);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), white);
}
.body .read-more {
  position: absolute;
  padding: 2px;
  bottom: 0; right: 0;
  margin-bottom: 0;
  width: 90px;
  text-align: right;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
  <div id="content" class="content truncated">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="linkArea">
    <div class="read-more-fade">
      &nbsp;
    </div>
    <div class="read-more">
      <a id="toggle" href="#">&hellip;read more</a>
    </div>
  </div>
</div>

<div class="body">
  <div id="content2" class="content truncated">This content is too short to be truncated.</div>
  <div id="linkArea2">
    <div class="read-more-fade">
      &nbsp;
    </div>
    <div class="read-more">
      <a id="toggle2" href="#">&hellip;read more</a>
    </div>
  </div>
</div>

Rafael · Accepted Answer · 2014-11-25 00:43:34Z

0

what I would do is detect if the height of the paragraph is greater than 5ems then display it

answered Nov 25, 2014 at 0:43

Rafael

7,79613 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

cayblood Over a year ago

I'm hoping there is a way of doing this with CSS without having to rely on JS, but I'll take anything that works. Code responses are most welcome!

Rafael Over a year ago

you should be doing this with JS. Because if someone turns off js they should still be able to see the content.

cayblood Over a year ago

I disagree. Our entire web site requires JS to run, so making this little piece work without it is unnecessary.

Rafael Over a year ago

Ah I gotcha, not everyone builds websites to the standards.

cayblood Over a year ago

Rafael, have you used any modern web frameworks like AngularJS, Meteor, Flex, Polymer, etc? All of these frameworks depend on javascript being enabled. I don't know of a single team who builds an entirely separate backup app without JS just to satisfy the few fools who disable it.

|

Collectives™ on Stack Overflow

Detecting content overflow in CSS

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related