Text Truncate

The .text-truncate class is used, like the name implies, to truncate the text with an elipsis. This comes in handy when the container has a specific size but the text should not wrap. In order for this to work, the element needs display: block or display: inline-block.

    <div class="container row">
        <div class="col-4">
            <p class="text-truncate">This is a quite 
                long that that will be truncated.</p>
        </div>
    </div>