Unable to truncate text in Bootstrap 4 list item to a single line despite attempting ellipsis implementation

My Bootstrap 4 card contains list items, but I am struggling to make each list text appear as a single line and take up the full width of the card. I have tried using ellipsis or hiding the overflow with overflow:hidden, but it is not working.

Here is the issue:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><p>Long content ............. Here. Overflow Ellipsis or Hidden not working (This should be 1 line of card width, on all screen sizes, and depending on screen size)</p></li>
    <li class="list-group-item"><p>Second List Item</p></li>
    <li class="list-group-item"><p>Third List Item</p></li>
  </ul>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

If you want to shorten text in Bootstrap 4, simply use the text-truncate class.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><p class="text-truncate">Long content ............. Here. Overflow Ellipsis or Hidden not working (This should be 1 line of card width, on all screen sizes, and depending on screen size)</p></li>
    <li class="list-group-item"><p>Second List Item</p></li>
    <li class="list-group-item"><p>Third List Item</p></li>
  </ul>
</div>

Check out a demo on Codeply

For more information on using text utilities in Bootstrap 4, visit Bootstrap 4 text utilities

Answer №2

To apply the styles below on a p element inside a list item tag

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Answer №3

Here is the code snippet for you:

p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><p>Long content ............. Here. Overflow Ellipsis or Hidden not working (This should be 1 line of card width, on all screen sizes, and depending on screen size)</p></li>
    <li class="list-group-item"><p>Second List Item</p></li>
    <li class="list-group-item"><p>Third List Item</p></li>
  </ul>
</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

determining the 'top' and 'right' coordinates upon clicking

I encountered an issue with a table having a drop-down menu that was getting cut off when opened on the last line. After some experimentation, I came up with a solution to detach the drop-down menu from its parent element and then reposition it by setting ...

javascriptjqueryhtmlcss

Experience Image in an inverted carousel or Virtual Reality/Spherical environment

My goal is to create a virtual reality experience similar to this: https://i.sstatic.net/8pZx0.png However, my background image is 4096x1024 and I want it to have a VR effect where the center appears further away from the screen and the edges are slightl ...

csshtmlthree.jswebglaframe

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

cssstandards-compliance

Optimizing carousel image dimensions for various screen sizes

I'm currently working on a full screen carousel in HTML and I'm curious about the optimal image size to ensure it resizes properly on all screen sizes without any distortion. Can anyone help me out with this? ...

htmlcsstwitter-bootstrapbootstrap-4

I'm encountering difficulty displaying my caption in the lightbox feature

I have a lightbox set up to scroll through images, but after adding forward and back buttons, I lost the caption that used to be displayed. Can anyone help me solve this issue? Your assistance is greatly appreciated. var $overlay = $('<div id="ove ...

javascriptjqueryhtmlcssruby

Issue encountered while dealing with the compact CSS for the navigation bar on my current website project

Seeking assistance with adjusting the CSS of a website's navbar. Looking for help to align items to the right and ensure responsiveness. HTML: <nav> <a href="#" class="logo"><img src="./images/logo.png& ...

javascripthtmlcss

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

I have successfully created a list of images using MaterialUI, but now I would like to enhance the user experience by adding a mouse hover effect to highlight the image under the cursor. Below is the code snippet for my image list. How can I accomplish t ...

cssreactjsmaterial-uihover

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

javascriptcssreactjssass

I'm looking to incorporate an "icon font" into my search bar using only CSS to activate the search functionality. Can you assist me with this task?

I've been attempting to implement a search icon that opens up a search bar. I'm almost there, but when the search icon is clicked, the search input doesn't open. However, if you click just to the right of the icon, it does. Is there a way to ...

htmlcssdom

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

javascripthtmlcssjson

Modifying the background image of div elements with JQuery in a loop function is ineffective when using Google Chrome

I am facing an issue in my application where I have a for loop to change the background image of two divs. The code snippet is as follows: for (var i = 0; i < length; i++) { $("div_" + (i + 1)).css("background-image", "../imageFile.png"); ...

javascriptjquerycssasp.net-mvc

Implementing dynamic button functionality to toggle classes on click event

Within my interface, I have a series of buttons with the following structure: <button id="btn1" type="button" class="btn btn-default btn-sm margin-left-1"> <span class="glyphicon glyphicon-chevron-down"></span> </butto ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Personalize PDF display using Bootstrap and CodeIgniter

In my Bootstrap collapse menu, I have the following setup: <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" a ...

htmlcodeignitertwitter-bootstrap-3bootstrap-4codeigniter-3

Troubleshooting Bootstrap 4 problem with varying sizes of div content

I have encountered a problem with the script below, where the content in a div is of variable size and does not always occupy the entire horizontal space allotted by the col-6 class from one row to the next: <div class="card-body " > <div c ...

htmlcssbootstrap-4

Tips for configuring the default appearance of a MaterialUI TextField to mimic the appearance when it is in focus

Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...

cssreactjsmaterial-uitextfieldemotion

Determine the width of the window and adjust the positioning of jQuery UI tooltips accordingly

Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle] $(function () { $(doc ...

javascriptjquerycssjquery-uitooltip

Finishing a division by both clicking outside of it and pressing a button

I am currently working on setting up a dropdown menu that can be closed both by clicking outside the opened div and by clicking the button or image that opens the div. Image with onclick function: <img onclick="hide()" id="menu" src="...."> Th ...

javascriptjquerycssonclickaddeventlistener

Tips for adjusting the CSS of each <p> element within a designated datafield selector

My goal is to include additional text following each numerical weight measurement. Here's the structure of the HTML: <table class="shop_attributes"> <div class="field" data-field-id="product_size"> ...

htmlcsscss-selectors

Fixing inconsistent font sizes across various browsers

During the development of my website, I couldn't help but notice a significant variance in font sizes between Internet Explorer and other browsers. Here's an example of what my page looks like: I intended for it to resemble the first and second ...

htmlcss

Can the @font-face src URL be modified?

We have integrated FontAwesome with Bootstrap on our website. However, we encountered an issue when using FA with a custom minifier as it tries to load fonts from a relative path, leading to a 404 error due to the structure of the minified URL. To address ...

cssfont-awesome