Author: Andreas Plahn

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:

<p class="text-truncate-xs text-truncate-sm">Maecenas egestas arcu quis ligula mattis placerat. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Phasellus tempus. Vestibulum fringilla pede sit amet augue.</p>

Source

Include this scss file to your site:

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@include media-breakpoint-only(xs) {
    .text-truncate-xs {
        @include text-truncate;
    }
}

@include media-breakpoint-only(sm) {
    .text-truncate-sm {
        @include text-truncate;
    }
}

@include media-breakpoint-only(md) {
    .text-truncate-md {
        @include text-truncate;
    }
}

@include media-breakpoint-only(lg) {
    .text-truncate-lg {
        @include text-truncate;
    }
}

@include media-breakpoint-only(xl) {
    .text-truncate-xl {
        @include text-truncate; 
    }
}