Difficulty
Easy
Most of the time, you want titles to remain on a single line where the visible title is enough context. Or you want to limit the total of lines in a paragraph. This may not be the best solution, but since the Elementor heading widget doesn’t have this feature by default, let’s do it with some simple CSS.
Note: This doesn’t work as a toggle. It is simply to shorten strings.
Shorten a title
Step One:
Give the Elementor widget a custom CSS Class.
Step Two:
Add the following CSS either in your Child Theme (recommended) or in the Custom CSS field under the widget’s Advanced tab.
/* ***** Change the max width to shorten the title */
.custom-class {
max-width: 50ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Below is the minified version
.custom-class{max-width:50ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
Shorten a paragraph
Step One:
Step One:
Give the Elementor widget a custom CSS Class.
Step Two:
Add the following CSS either in your Child Theme (recommended) or in the Custom CSS field under the widget’s Advanced tab.
/* ***** Change the line-clamp to reflect how many lines to display */
.custom-class {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Below is the minified version
.custom-class{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}
