Troubleshooting issue with ellipsis functionality in Bootstrap using flex layout

I have been struggling to include ellipsis after displaying 2 lines of icons. I have tried different approaches and modifications, but nothing seems to work. Seeking assistance from experts to tackle this issue, your feedback is highly appreciated.

.ellipsis {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }



.gicon{
            background-repeat:no-repeat;
            background-position: center center;
            background-size: auto 100%;
            height: 32px;
            width: 32px;
            align-self: center;
        }

    <div class="row facilityRow">
                                        <div class="col d-flex align-content-start flex-wrap ellipsis">
                                            <div class="d-flex flex-column mr-3">
                                                <i class="gicon" path="001-meditation" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Mediation"></i>
                                                <small>Mediation</small>
                                            </div>
                                            <div class="d-flex flex-column mr-3">
                                                <i class="gicon" path="003-yoga" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Yoga"></i>
                                                <small>Yoga</small>
                                            </div>
    </div>
</div>
cssbootstrap-4flexbox

Answer №1

Initially, avoid using the small element. Opt for an element that doesn't affect text formatting, like p.

You must limit the width of its immediate parent. If there is ample space on the x-axis, the method won't function.

.ellipsis {
  width: 100%;
  max-width: 32px;
}

.ellipsis p {
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="row facilityRow">
  <div class="col d-flex align-content-start flex-wrap">
    <div class="d-flex flex-column mr-3">
      <i class="gicon" path="001-meditation" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Meditation"></i>
      <div class="ellipsis">
        <p>Meditation</p>
      </div>
    </div>
    <div class="d-flex  mr-3">
      <i class="gicon" path="003-yoga" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Yoga"></i>
      <div class="ellipsis">
        <p>Yoga</p>
      </div>
    </div>
  </div>
</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

move div upwards from the bottom

Within my HTML page, I have a centered div that measures 640x480. I am looking to create another div that appears from the bottom edge of the original div, with dimensions of 640x400. This means only the top 80px of the original div will be visible. I&apo ...

jqueryhtmlcss

The issue with HTML where the header and footer elements are continuously repeating when

I'm struggling with the title header and footer repeating on every printed page. I just want to show the title at the top of the page and display the footer at the end of the print page. Can anyone provide a solution or suggestion? You can view my fid ...

javascripthtmlcssprinting

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

input[type="search"] doesn't seem to be functioning properly on IE9 and below. Any ideas on how to fix it would be greatly appreciated. Here is a screenshot for reference: .search-form .row input[type="search"] { color:#9fa0a0; font-size:20 ...

htmlcss

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Displayed on the page is an HTML Video tag, which streams a video from the speaker (WebRTC). <div id="remoteVideoContainer"> <video id="remotevideo" autoplay="autoplay" controls="" loop="loop" preload="true" height="500" width="100%"> ...

htmlcssgoogle-chromewebrtc

Having trouble getting StencilJS Bottomsheet to work properly? Looking for a way to smoothly slide up your content?

I've been working on creating a Bottomsheet in Stencil, but I'm facing an issue where it shows up suddenly when activated. My goal is to display the overlay when the active property is set, and then smoothly slide up the content. Below is my comp ...

javascriptcssweb-componentstenciljs

Aligning a picture with a heading

I'm currently working on a website header design where I am struggling to align the logo and site title horizontally. As someone who is new to CSS, any guidance or tips would be greatly appreciated! The logo image has the following styling: .logo { ...

csswordpress

Dynamic resizing container

For most of my websites, I typically place content within a div that features rounded corners with a shadow effect. Recently, I've been trying to figure out if it's possible for this parent div to automatically center both vertically and horizont ...

htmlcss

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

It is difficult to articulate, but I am noticing a 1 pixel line with 3 containers each having a width of 33.3333%. Unfortunately, this is not something I can change as it is part of the material-ui framework. <div class="container"> <div clas ...

cssmaterial-ui

Unable to access the "Open" status of the Dropdown menu

Having some trouble in my code - I am attempting to display a dropdown with an open state by adding the "show" class, but it's not working. Can anyone assist me? Here is the HTML snippet: <div class="row"> <div class="col-xs-12"> ...

bootstrap-4

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

Applying CSS transitions and transforms to SVG elements

Having trouble animating an SVG group with CSS transitions after applying a CSS transform? Check out my code below and let me know if you spot the issue. Inline SVG Code <a href="javascript:void(0)" class="hub-icon-container"> <svg xmlns="ht ...

htmlcsssvg

The art of replacing material-ui styles with styled components

As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...

javascriptcssreactjsmaterial-uistyled-components

Implement a jQuery loading animation triggered by scrolling down the page

Can anyone offer guidance on how to trigger an animation as you scroll down a webpage? I've come across this feature while browsing through this website: I would love to include code examples, but I'm unsure of where to start with implementing t ...

javascriptjqueryhtmlcss

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

jqueryhtmlcsshtml-tableshow-hide

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

htmlcsstwitter-bootstrapbootstrap-5

Page showing without banner

As I scroll down through my website, I want a specific banner to appear when I reach the contact page. The banner will show a goodbye message and give users the option to close it or keep it open. For example: (function() { requestAnimationFrame(fu ...

javascripthtmlcssweb-deployment

Embedding a compact table using HTML on the sidebar

I am facing a challenge in this HTML code where the table appears next to the spans. How can I make sure that the spans appear below the table instead? <div> <table align="right"> <tr> <td>smthg</td> ...

htmlcss

Using justify-content-between in a div container with only two items will not produce the desired effect

I'm having trouble aligning two elements on opposite ends of a div container using Bootstrap's justify-content-between class. The h4 element is not on the left and the button on the right as expected. I am using Bootstrap 5.2.3. Can anyone help m ...

htmlcsstwitter-bootstrapbootstrap-5

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disapp ...

javascriptjqueryhtmlcss