Menu
I have a bootstrap 4 card in which I want to hide the overflow of the subtitle (and show "..."). How can I achieve this? If possible with pure bootstrap code...
<div class="card-block p-1">
<p class="card-title">Test object</p>
<p class="card-subtitle text-muted">Added by Someone with a long name</p>
<p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p>
</div>
781
Approach 1: To hide overflown text as ellipsis using CSS properties. Then add its select to element of class col and wrap it within div tag. We can also use d-flex instead of row. Example 1: Below program illustrates how to hide overflown text as ellipsis using dynamic bootstrap cols using CSS properties and Flex.
If your table is a child of a div such as <div class="table-responsive"> , add the following style within the parent div tag so that the div tag now reads: <div class="table-responsive" style="overflow-y: hidden"> .
Use the . overflow-auto class if you want a scroll in your div. This is an example of using . overflow-auto on an element with set width and height dimensions.
Just use the text-truncate util class..
<div class="card">
<div class="card-block p-1">
<p class="card-title">Test object</p>
<p class="card-subtitle text-muted text-truncate">Added by Someone with a long name</p>
<p class="card-text mx-auto text-center"><span class="badge badge-pill badge-danger">€ 800</span></p>
</div>
</div>
https://www.codeply.com/go/bZufg6X1So
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
