5 column ROW with long text in Bootstrap 4

Question

I know how bootstrap 4 is working with col instead of col-xs but the issue I am facing is that when the text within the column is too long to accommodate on a small screen device, the columns start to stack below each other. Is there any way to prevent this and fix the col width to 1/5 of the screen and just cut off the extra text. Try the below code and compress your browser width.

<div class="container-fluid">
<div class="row">
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
    <div class="col">some loong loong loong loong loong text</div>
</div>

Answer 1

You can use the text-truncate class. This will prevent the text inside the columns from wrapping and use ellipsis (...) when the text is too long.

https://www.codeply.com/go/rGFZfVlidi

<div class="container-fluid">
    <div class="row">
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
        <div class="col text-truncate">some loong loong loong loong loong text</div>
    </div>
</div>

Alternatively, text-nowrap could be used if you don't want .... Read more on text wrapping and overflow in Bootstrap 4.