Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Engelbert Ebalo
Engelbert Ebalo
3,697 Points

How to lmit text shown when in mobile view (RoR, Bootstrap)

I have a page similar to what a blog would look like: it shows multiple posts in a single page.

What I would like to do is when in mobile view, I would like to limit the amount of text shown in the body of the post.... This is so that vertically, all the divs are the same height. If the user wants to see more of the text/details, they click it and like an accordion, it will expand.

(<div><p>really long post content</p></div>

I know I'll have to do something with jquery's hide/show thing. What I am clueless about is how to show full text when in tablet/desktop view and show only 4 lines of text or something when in mobile view.

Thanks!

2 Answers

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

Try the truncate method http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-truncate

Derrick Mull
Derrick Mull
18,518 Points
Derrick Mull
Derrick Mull
18,518 Points

While truncate will cut the text, It's not quite as flexible as a css/JS solution would be. CSS has the text-overflow property that can truncate text, and would be more easily manipulated by jQuery.