We need to be able to limit the amount of text shown on a mobile device. We were hoping to do so in a similar way to the various 'Read More' plugins going around (.htm) where we call some JS on a div containing HTML elements.

The issue is, that we do not want to call these libraries on text on a large device. Is it possible to use media-queries in conjunction with some CSS, without introducing a new library (like Respond.js)?

Does anyone have any better approaches to limited text on a mobile device, and providing a read more link?

Edit: We are using media queries to already handle certain widths. But we would like to truncate a container with some text in it, in an intelligent fashion. If you're on a mobile device, and the div contains 1000 words, we would like to show 100 words, and then a "Read More" button that will expand the text. If you resize the window, this button and the truncating needs to seamlessly disappear.

What we have now is the following:

1. On page load, copy everything in the content div (the div containing the text we want to truncate) to a div above it.
2. Use max-width media queries to hide that content-div, and show the new one. Use some JS to truncate the text inside the new div element.
3. Append a button to end of new div that hides the new div, and shows the old one.

Is there a better way of handling this?

We need to be able to limit the amount of text shown on a mobile device. We were hoping to do so in a similar way to the various 'Read More' plugins going around (http://plugins.learningjquery./expander/index.htm) where we call some JS on a div containing HTML elements.

The issue is, that we do not want to call these libraries on text on a large device. Is it possible to use media-queries in conjunction with some CSS, without introducing a new library (like Respond.js)?

Does anyone have any better approaches to limited text on a mobile device, and providing a read more link?

Edit: We are using media queries to already handle certain widths. But we would like to truncate a container with some text in it, in an intelligent fashion. If you're on a mobile device, and the div contains 1000 words, we would like to show 100 words, and then a "Read More" button that will expand the text. If you resize the window, this button and the truncating needs to seamlessly disappear.

What we have now is the following:

1. On page load, copy everything in the content div (the div containing the text we want to truncate) to a div above it.
2. Use max-width media queries to hide that content-div, and show the new one. Use some JS to truncate the text inside the new div element.
3. Append a button to end of new div that hides the new div, and shows the old one.

Is there a better way of handling this?

• javascript
• css
• responsive-design

Share Improve this question Follow edited Apr 11, 2013 at 21:53 Dominic Bou-Samra asked Apr 11, 2013 at 21:36 Dominic Bou-SamraDominic Bou-Samra 15.4k2828 gold badges107107 silver badges164164 bronze badges 4

• Initial reaction was to assign text-overflow:ellipsis at certain mq's for the specified shortened container – Jay Rizzi Commented Apr 11, 2013 at 22:06
• 1 Is what you have now giving you the desired effect? – Scott Bartell Commented Apr 11, 2013 at 22:32
• Did my answer resolve your issue? – Scott Bartell Commented May 1, 2013 at 18:22
• I already had media queries exactly like yours, so technically it didn't :P But I'll give you the green arrow. – Dominic Bou-Samra Commented May 1, 2013 at 23:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can hide/show elements when page width is under a specified amount using CSS @media.

HTML:

<p>here is some content.</p>
<p id="extra_content" class="extra_content">here is some extra content</p>
<button id="read_more" class="read_more">Show More</button>

CSS:

@media (max-width: 650px) {
  .extra_content {
    display: none;
  }
  #read_more {
    display: block;
  }
}

.read_more  {
  display: none;
}

.show {
   display: block!important;
}

Pure JavaScript:

document.getElementById("read_more").addEventListener( 'click' , changeClass);

function changeClass() {
  var content = document.getElementById("extra_content");
  var btn = document.getElementById("read_more");
  content.classList.toggle('show');

  if (content.classList.contains("show")) {
      btn.innerHTML = "Show Less";
  } else {
      btn.innerHTML = "Show More";
  }
}

Here's a working example: http://jsfiddle/xfgqW/2/

Read more here: http://webdesignerwall./tutorials/responsive-design-with-css3-media-queries

---

Using Multiple Buttons

To make this work with multiple buttons we need to modify things slightly. Basically we'll need to query for the button elements using a mon class and loop over them to assign the click event and change the innerHtml. For example:

<button class="read_more">Show More</button>
<p>here is some content.</p>
<p class="extra_content">here is some extra content</p>
<button class="read_more">Show More</button>

document.querySelectorAll("button.read_more").forEach(function(button) {
  button.addEventListener( 'click' , changeClass);
});

function changeClass() {
  var content = document.getElementById("extra_content");
  var buttons = document.querySelectorAll("button.read_more");

  content.classList.toggle("show");

  var buttonText = content.classList.contains("show") ? "Show Less" : "Show More";

  buttons.forEach(function(button) {
    button.innerHTML = buttonText;
  });
}

Here's a working example with multiple buttons: https://jsfiddle/uc8d7w3e/1/

If you need to call JS only for large/small screens, check for $(window).width().

Use @media (max-width: something) to make specific rules in your CSS

Do You want something like this?

@media screen and (max-width: 1024px) {
  #read_more {
    display: none;
  }
}