Bootstrap 4 truncate-text responsive classes SASS helper

I needed to truncate text in certain device sizes in a Bootstrap 4 enabled site.

Bootstrap comes with the text-truncate css class that will truncate text in elements that are in displayed as block or inline-block.

There is no support for targeting the different viewports out the box.
Here is solution for this;

Usage

We want the text of this element to truncate (Shorten the text if it doesnt fit and  adds … to the end of the text) on smaller devices:

Source

Include this scss file to your site:

 

Leave a Reply