When the text becomes too lengthy, the list begins to appear peculiar

I need a list with scrollbars, however, the appearance gets messy when the content is too lengthy:

https://i.sstatic.net/ayQcD.png

I want it to resemble this design:

+----------------------------------------------------+
| aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  Trashcan|
+----------------------------------------------------+

Below is my HTML code snippet:

<div class="col-md-7 col-sm-7 col-xs-12">
  <div>
    <div style="height: 75px;padding-bottom:0px; padding-top:0px; overflow: auto; border: 1px solid #ccc;" id="excludedDomains">
      <ul class="list-group">
        <li class="list-group-item">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<i style="position:relative; float:right;" class="fa fa-trash-o btn btn-danger btn-xs"></i>
        </li>
        <li class="list-group-item">
          some text
        </li>
      </ul>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Ensure your text fits neatly within your div by utilizing word-wrap: break-word; in your CSS.

.list-group-item {
  word-wrap: break-word;
}
<div class="col-md-7 col-sm-7 col-xs-12">
  <div>
    <div style="height: 75px;padding-bottom:0px; padding-top:0px; overflow: auto; border: 1px solid #ccc;" id="excludedDomains">
      <ul class="list-group">
        <li class="list-group-item">aaaaaaaaaaaaaaaaaaa... (truncated for uniqueness) ...aaaaaaaaaaaaa<i style="position:relative; float:right;" class="fa fa-trash-o btn btn-danger btn-xs"></i>
        </li>
        <li class="list-group-item">
          some text
        </li>
      </ul>
    </div>
  </div>
</div>

Answer №2

Modify the list-group-item class to d-flex and enclose the text within a span using text-truncate:

<ul class="list-group">
  <li class="list-group-item d-flex"><span class="text-truncate">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><i style="position:relative; float:right;" class="fa fa-trash-o btn btn-danger btn-xs"></i>
  </li>
  <li class="list-group-item"> some text </li>
</ul>

https://codeply.com/p/oTEgLYk2Vv

Answer №3

To get rid of the vertical scrollbar, it is recommended to either eliminate the height property or change it to auto.

If you want to remove the horizontal scrollbar as well, consider setting scrollbar-width: thin; or completely getting rid of it with none.

Also, don't forget to use the overflow-x property on li.

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

When clicking on a Bootstrap button, there is no visible outline

I've come across numerous examples of Bootstrap buttons where I can click on them and they display an outline. Despite my attempts to replicate this, my button doesn't show the outline as intended. What could be causing this issue? <!-- Bo ...

htmlcssbootstrap-5

The reverse animation for .is-exiting in Smoothstate.js is not triggering

I've been searching for a solution to my issue but haven't had any luck finding one that works for me. Currently, I am using smoothstate.js to trigger animations when the page loads and ideally reverse them when the page exits. However, while th ...

jquerycsssmoothstate.js

What is the process for submitting a form from a different webpage?

I am working on a website with two pages. Each page has a header with navigation tabs to move between page 1 and page 2. When a tab is clicked, I want the selected page to re-POST to the server for a quick refresh before displaying. There is a form on e ...

javascriptjqueryhtmlforms

Element with a fixed position within an iScroll container

Has anyone encountered an issue with fixing an element with position: fixed inside a big Iscroll page? It seems like the element scrolls along with the content due to the transition imposed by Iscroll. I'm trying to fix the "FIXTHIS" element, but it ...

htmlcssiscroll

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

javascripthtmljquerycss

Is there a possible method to obtain a smartphone number from a website?

Seeking a solution to retrieve the phone number of a device using HTML 5, JavaScript, or similar technology. Recently, I successfully obtained the coordinates of the device by incorporating the following JavaScript code: <!DOCTYPE html> <html> ...

javascriptandroidhtml

Make SVG Path (Vector Graphic) Simplification easier

Provided Input: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600"> <g enable-backgrou ...

javascripthtmljquerycssarrays

JavaScript strangeness

I am currently working on a dynamic page loaded with ajax. Here is the code that the ' $.get' jQuery function calls (located in an external HTML page): <script type="text/javascript"> $(function() { $('button').sb_animateBut ...

javascriptjqueryhtmlajax

Steps to Launch a Fresh Modal Without Exiting the Current Modal

Is it possible to open a modal without closing the current modal? I found this code on a website and I am trying to implement it: <!DOCTYPE html> <html lang="en> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com ...

htmlcssbootstrap-4bootstrap-modal

The combination of DOMDocument and DOMXPath is a powerful duo

I am currently working on converting CSS to inline using DOMDocument and DOMXPath. However, I'm encountering an issue where the HTML I provide is not being recognized as valid XML. Is there a way for me to configure these functions to ignore unknown ...

phpcssregexphpquery

The problem I am encountering with particles.js

Having an issue with the particles.js library where the particles are displaying beneath the elements despite setting the Z-index. I have tried various solutions from CSS, Stack Overflow, Google, and YouTube but none have been effective. Here is my code s ...

javascripthtmlcss

Data is nowhere to be found despite using the post method, but the URL still contains valuable information

Recently, I've delved into the world of PHP and have been experimenting with HTML forms. Initially, I used the method GET which worked perfectly fine. However, when I switched to using the method POST, I encountered an issue where I couldn't retr ...

phphtml

Elusive Appearance of the Flask Flash Message

I have developed a web application using Flask that allows users to upload files to an S3 storage. However, I would like to enhance the user experience by showing them the progress of their file uploads in real-time. To achieve this, I am utilizing Flash t ...

pythonhtmlflaskamazon-s3flash-message

How can I use HTML5 to create a playlist of videos that play sequentially in a video tag from an array?

Attempting to play multiple videos in HTML5 video tag consecutively has been quite a challenge for me. After browsing through some related queries, I attempted to modify my code based on the solutions provided. However, all I seem to achieve is playing t ...

javascripthtmlvideo

Display button in Django template based on user's group level

In my application, there are 3 groups with different permissions: viewer, editor, and creator. I need to display the appropriate buttons based on these permissions. For viewers, they can only see lists and details. Editors have viewer permissions plus th ...

htmldjangoview

unable to decrease the dimensions of the image within the next/image component

Why won't the image size change? I've attempted to adjust the width and height in the component and also tried styling with className, but no luck. The image only seems to resize when using a regular img tag. Here is my code: function Header() ...

cssreactjsnext.jstailwind-css

How can I prevent a nested Table from inheriting the style of the parent table?

Just to clarify, I'm not using tables or any other styling methods like that on my page. I have a simple table that lists services, prices, and PayPal buttons for adding to the cart. While everything is functioning properly and looks good, there are ...

csscss-tables

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...

javascripthtmlcsscanvas

What is the reason behind the ineffectiveness of placing HTML5 canvas in the background?

I've been attempting to set an HTML5 canvas as my web page background, but I just can't seem to get it right. Can someone provide me with some guidance on how to achieve this? Here is the code from my latest attempt: <!DOCTYPE html> <ht ...

javascripthtmlcanvashtml5-canvas

The appearance of my website appears differently depending on the resolution

Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted. The tool I made allows me to inp ...

javascriptjqueryhtmlcss