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
Matt Campbell
9,767 PointsOverflowing text
Here's the scenario. You have a div, it's a rectangle. In that rectangle you're getting a post from your database that doesn't fit in the div but it's how you want it as there's a button to read more which takes you to the full article.
You set the div's overflow to hidden, job done,text doesn't go past the bounds of the div but the last line now becomes your worst enemy. At a lot of heights, half the line is showing and text-overflow doesn't do squat.
Use fixed heights I hear you cry, not a chance. It needs to be responsive to the images and the rest and there's no way I'm doing a media query for every single resolution and how would I go about reducing the amount of text got from the database?
So, is this one of those things that just a complete pain in the arse or is there some way of sorting this out with CSS or a jQuery script? I suppose I could do a percentage line height that equals 100%, that would sort it out. Or write a script that increases and decreases line height depending on container height but I don't want to do that.
Any help much appreciated - Guil Hernandez and Andrew Chalkley
Thanks all. .
4 Answers
Matt Campbell
9,767 PointsAndrew Chalkley & James Barnett - http://codepen.io/Th3M8dH8tt3r/pen/bBnqL
As you can see, there's still a bit of the bottom line's text showing. The overflow doesn't cut it off before the next line of text begins.
How can this issue be solved?
Matt Campbell
9,767 PointsFound this which is cool and perfect:
https://github.com/ftlabs/ftellipsis
Only problem is, it only does it for the first item in the WordPress loop. So if I have three posts being pulled by the loop, this only works on the first. I imagine a foreach instruction needs incorporating somewhere. Would I be right Andrew Chalkley?
Andrew Chalkley
Treehouse Guest TeacherSounds right :)
Matt Campbell
9,767 PointsLooking at clamp.js as well, can't work out how to get it to work though.
I suck as jquery, gonna have to work out how to do a foreach loop.
Thanks Andrew Chalkley
Andrew Chalkley
Treehouse Guest TeacherTry using document.getElementsByClassName and then for looping over them.
So this would look like
var element = document.getElementById('my-element');
var ellipsis = new Ellipsis(element);
ellipsis.calc();
ellipsis.set();
...
var elements = document.getElementsByClassName('my-element');
//for loop...
var ellipsis = new Ellipsis(element);
ellipsis.calc();
ellipsis.set();
There's a rough out line :)
Matt Campbell
9,767 PointsAndrew Chalkley - thanks dude. I think that's enough to point me in the right direction. Saved me hours again. How long till your new course is out? I hate not been very good at jQuery.
Andrew Chalkley
Treehouse Guest TeacherI'm currently finishing off CCs for JS foundations and got to help out on some other content. No timelines on other stuff yet. I'll update the Roadmap when I get more details. :)
Matt Campbell
9,767 PointsCool man, I'm going to put a pin in this line clamping crap, getting frustrated and I haven't got hours spare to sit and try and work it out.
Thanks though Andrew, been a great help! Definitely will help when I come back to it.
James Barnett
39,199 PointsThat all seems like a very heavy handed solution for what is essentially a type setting issue.
It seems to me a little CSS can add some vertical rhythm to help you out here:
http://codepen.io/jamesbarnett/pen/qFCAc
body { font-size: 16px; line-height: 1.25; }
/* height must be a multiple of line-height */
.lists, .image { height: 10em; margin: 0.625em; }
/* padding must match line-height */
.lists p { padding: 1.25em 0.625em; margin: 0;}
.container-one, .container-two, .container-three{
height: 11.25em;
margin: 1.25em 0.625em;
}
If you want to learn more about vertical rythym check out: http://teamtreehouse.com/library/websites/css-foundations-second-edition/web-typography/responsive-text-and-vertical-rhythm-part-1
Matt Campbell
9,767 PointsThanks James. I'll give this a go tomorrow. I was trying to do this with percentages but it wasn't going so well. I'm quitting for today...had enough!
James Barnett
39,199 PointsThe magic of typography is that it's all about the ems, so just convert the percentages over to ems.
Matt Campbell
9,767 PointsGone with fixed height in the end which is actually better. Was over-complicating things unnecessarily.
James Barnett
39,199 PointsJames Barnett
39,199 PointsA picture is worth a 1000 words, can you make up a codepen so we can get a better idea of the issue you are seeing. I think you might want to look into modular typography but I can't be sure without seeing some code.