Cut Off Your Elementor Text Like A Professional
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
Cut Off Any Text, Any Website, Dynamic Or Not
I received a comment from a user (Thanks Diego!) who struggled with dynamic content. I’m unsure of the specific type of dynamic content they were using, so let’s explore a couple of possibilities to address this issue.
A Preface
In my tutorials, I frequently mention the “selector” functionality of Elementor that you use when adding CSS on the page.
But rarely (like never) use it myself. *keep in mind this post is about 5 years old.
Initially, I thought this would help beginners, as many tutorials reference it. However, I believe it creates a bad habit and ultimately does a disservice to the reader.
I think we should focus on universal solutions. This means editing native CSS and using the web inspector to create our CSS.
utilizing the web inspector to create our CSS So lets try this with the excerpt from this page.. which is “Cut off your excerpts or descriptions in previews by line, or multiple lines with this fully adjustable style.”How Do We Add Ellipsis To Dynamic Content
So what’s involved here?
A couple things, we need to add a class to the items we’re going to affect.
Now we could name our class anything we want, pretty-strawberry would be fine. I personally always append kc- in front of every class I make on every website which makes it easier for me to identify them, but to each their own.
In this case I added two different classes one to handle a single line ellipse and one to handle a 2 line ellipse.
So they look like this:
Then after you’ve added in your dynamic content. I typically will open a new incogneto window so I can see the actual page, I’ll open the inspector to find where exactly this text is that I want to affect.
These all say the same thing, which is…. we are targeting the div (div.elementor-widget-container) that is inside the div that has the class kc-dynamic-ellipsis-1.
So, if I make this as short as possible, my final code would look like this for both the 1 line and 2 lines.
Dynamic version of the excerpt
Dynamic version of the excerpt 1 line ellipsis
Dynamic version of the excerpt 2 line ellipsis
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!
16 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.
This is not working with dynamic tags sadly
Thanks Diego,
I apologize for not seeing this earlier, hopefully you got a solution if not, I hope this helps. I added another section to this blog above. THANK YOU!
Or if this does not answer your question please reach out to me at cwdynamic.com