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>

score 0 · Answer 1 · answered Nov 25 '14 at 00:43

0

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

answered Nov 25 '14 at 00:43

Rafael

7,605
13
31
46

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! – cayblood Nov 25 '14 at 18:54
you should be doing this with JS. Because if someone turns off js they should still be able to see the content. – Rafael Nov 26 '14 at 09:01
I disagree. Our entire web site requires JS to run, so making this little piece work without it is unnecessary. – cayblood Nov 27 '14 at 17:38
Ah I gotcha, not everyone builds websites to the standards. – Rafael Nov 28 '14 at 05:50
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. – cayblood Nov 28 '14 at 18:46
Yes I know Angular, Backbone, Ember, and libraries like jQuery. I understand that most websites rely on JS however best practices for content remain the same. Any sort of content that is going to be manipulated by js should remain visible with it off. This is standard practice. Remember websites should always be designed around the content. – Rafael Nov 28 '14 at 18:52
Rafael, please explain how one can develop an Angular app that still works with javascript disabled. – cayblood Nov 28 '14 at 21:03
It's not hard to find the answer if you actually researched http://stackoverflow.com/questions/22256371/how-to-handle-javascript-being-disabled-in-angularjs I never said that you can run the app with JS disabled. I am saying that the content should be kept if disabled. In this case you would return the textual information and display a message stating that js must be enabled to fully utilize the app. – Rafael Nov 28 '14 at 21:15
Rafael, would you disagree that most content of an Angular app is not even accessible without Javascript? How can you display app content if even your URL routing is done in Angular (which is how almost all Angular apps work)? – cayblood Nov 28 '14 at 21:46
Notice that your answer isn't an answer. The link you posted just shows how to show a notice if js is disabled. It doesn't show how to keep all content visible if js is disabled. – cayblood Nov 28 '14 at 21:47
Like I said just copy over the content of the site there or better yet redirect them to the nonjs version of the site. – Rafael Nov 28 '14 at 21:48
Again a non-answer. You are saying developers should develop an entire non-js version of their application. Show me a single company using a modern js framework like Angular who is doing this. – cayblood Nov 28 '14 at 21:50

Detecting content overflow in CSS

1 Answers1