Displaying truncated text on Bootstrap 4 ensures that content is condensed to fit within at

I have a paragraph that I am attempting to truncate using the bootstrap class text-truncate. However, the output only shows one line of text.

<p class="text-truncate" style="max-width:300px;">
    Resize the browser window to see how its width (max-width) changes at different breakpoints.
</p>

The current output is:

Resize the browser window to see that its wid...

The desired output is:

Resize the browser window to see that its width (max-width)
will change at different breakpoints...

Even when trying inline CSS with -webkit-line-clamp: 2, the result remains the same. How can I achieve multiple lines while using the bootstrap text-truncate class?

csstwitter-bootstrapbootstrap-4

Answer №1

While Bootstrap4 doesn't have a built-in method for truncating text to multiple lines, you can achieve this using the approach suggested by CSS tricks. Unlike Bootstrap's code which is tailored for one-line truncation, this method requires setting the width at the parent element.

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
<div class="text-truncate-container"><p class="text-truncate">Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints.</p></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

challenge with incorporating rating system using jQuery

I am facing a simple issue here, but my knowledge of jQuery is limited and I'm struggling to find a solution. I have been trying to implement a rating function using the code from this link: Everything seems to be working fine, but I noticed that on ...

jqueryhtmlcssjquery-selectors

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

javascriptcssreactjsbootstrap-4react-bootstrap

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

htmlcssvue.js

JavaScript visibility disappearing intermittently

I have created a custom image viewer box that overlays a thumbnail gallery page. The image viewer should appear when a user clicks on a thumbnail. However, currently, the viewer only pops up briefly and then disappears again. I am looking for a way to mak ...

javascriptcssvisibility

Is it necessary to convert SCSS into CSS in React?

I have a query about whether it is necessary to first compile our scss files into css and then import the css files into our react components, or if we can simply import the scss directly into the components? I've successfully imported scss directly ...

cssreactjswebpacksasscreate-react-app

The multiple lines text box displays an input box

Having a simple issue here, I've set the value of an input text box, but when the page loads it is displaying in multiple lines, and this seems to be happening only on Chrome browser. Can anyone offer any assistance? This is the HTML code for the ...

phphtmlcssinput

Tips for aligning two elements in a row using Bootstrap 4 Flex

I am facing a challenge with positioning an H2 element and a Dropdown button on the same line using bootstrap 4 flex. Here is what I have: https://i.sstatic.net/kV45k.png This is what I am trying to achieve: https://i.sstatic.net/Owt5j.png Below is my ...

cssbootstrap-4

I am experiencing issues with my React implementation of the bootstrap carousel

My carousel seems to be having some issues and I'm not sure what's causing it. Can someone provide guidance on how to resolve this problem? Here is the link to my code on Codesandbox: https://codesandbox.io/s/nice-heyrovsky-8yucf?file=/src/Prompt ...

javascriptreactjsbootstrap-4

What is the best way to dynamically adjust the size of a table or div when clicking in Angular 2?

Is there a way to dynamically resize a table or div in Angular 2 by clicking on a button or other element? I am attempting to change the width of a table from 300px to 100px using a function that utilizes CSS and TypeScript. table{ width: 300px; res ...

csstypescripthtml-tableangular2-template

Adjusting alignment differences during the transition from Bootstrap 4 to Bootstrap 5?

While developing a blog site on Flask (Python) with Bootstrap 4, I initially used the Bootstrap 4 CDN. However, upon the release of Bootstrap 5, I made the switch to using Bootstrap 5 locally. Two issues have arisen from this switch: In Bootstrap 4, the ...

twitter-bootstrapbootstrap-4bootstrap-modalbootstrap-5

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

The Bootstrap 4 alignment class for centering rows is not functioning as expected

<div class="row align-items-center remember"> <input type="checkbox" class="form-control" checked>Remember Me </div> <div class="row align-items-center"> <input type=& ...

htmlbootstrap-4

Issue with margin-bottom in flexbox causing layout problems

My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...

htmlcssflexboxmargin

Arranging two divs to appear side by side, but they are mysteriously aligning in a diagonal pattern

I'm facing an issue with my navbar's divs not displaying side by side when set to display inline. Here is the HTML code snippet: <!--Nav starts here--> <nav class="navbar"> <div class="navbar-item-set"> ...

htmlcss

Methods for transferring data to controller in Angular Modal service

After implementing the angular modal service discussed in this article: app.service('modalService', ['$modal', function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, m ...

javascriptangularjstwitter-bootstrap

Disable javascript when using an iPad

I'm working on a website with parallax scrolling that I don't want to function on iPads. Is there a way to prevent the parallax effect from happening when the site is accessed on an iPad? Any guidance on how to disable parallax scrolling based o ...

javascripthtmlcssipadparallax.js

Having difficulty changing the background color to black for the parent div that houses multiple child divs

Here is an example without the height attribute provided: http://jsfiddle.net/karthik64/pFcpX/ And here it is with the height attribute included: http://jsfiddle.net/karthik64/pFcpX/1/ The issue arises when I try to set a fixed 'height' attribu ...

htmlcss

Can the <br> tag affect the layout in terms of horizontal space?

I am perplexed by the fact that it displays two lines vertically separated with a br tag differently than two lines vertically separated with the first line acting as a block level tag. For example, see this code snippet: https://jsfiddle.net/qzgeassf/ ...

htmlcss

The xModal window will only pop up once, after which a page refresh is required

My modal window opens when a user clicks on a div, but I'm having an issue. The modal window doesn't reopen when I click on the div again. Here is my code: <div onclick="document.getElementById('id01').style.display='block&apos ...

javascriptjqueryhtmlcssbootstrap-modal

Set the background color of the container row to extend the full width, encompassing

I am working on a grid container and I want to change the background color of the second row within it. Check out my Fiddle This is the HTML markup: <div class="totalContainer totalContainer__space"> <div class="totalContainer__ ...

htmlcss