Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Cut Off Your Elementor Text Like A Professional

cut off elementor text
Basic
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

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!

4 Responses

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Basic

14 Column Test

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

RELATED
Basic

14 Column Test

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets