Post Contents
The Problem With Long Text
Really quick way to limit text in a column.
This particularly comes in handy when you are displaying short descriptions.
Let’s say you have the following text;
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
We want to put that into a couple different columns, one cutting it off at one line, one cutting it off at 2, and one cutting it off at 3.
Cutting Off At One Line
In this first instance, we’re going to cut off a single line. In this case, I’m targeting the container, and the paragraph inside. I can place this in the CSS for the column that the text is inside as a text field
selector p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
Cutting Off An H2
In this next case, we’re going to cut off an H2, I’m targeting the container and the H2 inside, placing the css on the container column.
selector h2{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder's jacket
Cut Off By Number Of Lines
Finally, if we want to just cut off at a certain number of rows, we can add in any number we want.
For these, the first one I used the CSS in the same location on the containing column.
For the second, I put the code right on the text field,
Fort the last one, I added a class to the text field and stuck the CSS on an external style sheet.
selector p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
selector {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.three-row{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
selector p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
selector {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
.three-row{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
My central memory of that time seems to hang on one or five or maybe forty nights—or very early mornings—when I left the Fillmore half-crazy and, instead of going home, aimed the big 650 Lightning across the Bay Bridge at a hundred miles an hour wearing L. L. Bean shorts and a Butte sheepherder’s jacket
Final Thoughts
This trick comes in handy when you’re creating grids, blog post, or product excerpts.
Have you used this method?
Do you know a better way to pull this off?
Having trouble getting this to work?
Let me know in the comments!
14 Responses
Hey Casey,
The uneven height of my post grid didn’t look good. I stumbled on this post because after reading your post in the Crocoblock group and decided to take a look around. I applied your CSS fix and it worked like a charm. Thanks for the info.
You’re Very Welcome!
Please share our CSS fix, I’m having the same issue. Ta
Hi Rod, I’m not sure I understand? What is the problem that you’re having?
Thanks a lot. I accomplished what i needed in combination with some other css to give each column a static and fixed height =)
Gld it helped! Had to look this up and use this again myself this week!
I’ve looked months for a solution, and gave up many times, and this is the second resource that you’ve helped me with instantly after trying to implement, easy and straight forward, highly appreciate the effort and time you put into your work.
Actually, this is helpful. but I want the text to move/ slide left automatically after the cut-off to reveal the remaining text. that must be cool
@gaurav, that’s an interesting Idea, I’m sure there are better ways to do this, but off the top of my head you could just add a transition and come up with something funky like this:
eledesignhelp.com/clamp-test.html
**hover over the text**
html
style
div.clamp-it p{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width:300px;
transition: all .5s ease;}
div.clamp-it p:hover{
overflow: visible;
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-width: 800px;
}
/style
body
div class=”clamp-it” p Finally, if we want to just cut off at a certain number of rows, we can add in any number we want.
For these, the first one I used the CSS in the same location on the containing column.
For the second, I put the code right on the text field,
Fort the last one, I added a class to the text field and stuck the CSS on an external style sheet.
/p
/div
/body
/html
Hello!
I’ve tried this code, and on androd it works prefectly… however on iOS, the lines that have to get cut (text with more than 2 lines in my case), directly dissapear.
Any idea why this could be?
Hi Ivan,
I’m sorry I actually don’t have any idea? Would love to get a response from the crowd if anyone else does, or if you find a solution, would you post back?
Hi ,
Why for the phone not working ?
What phone?
Thank for it. Helps a ton.