What is the best way to conceal overflowing text with ellipsis by utilizing dynamic Bootstrap columns?

I'm having trouble aligning a text alongside an icon within a card. The card is enclosed in the Bootstrap "col" class, which dynamically adjusts its size based on the number of items in a row.

When there isn't enough space, the text wraps and appears on a new line. My goal is to keep the text next to the icon on one line and cut it off with an ellipsis (...) if there's not enough room.

You can view my current setup here

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  </head>

  <body>

    <div class="row mx-1">
      <div class="col" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Normal title
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
    </div>

  </body>

</html>

Here is what I am aiming for

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To create a unique text layout, one approach is to place your text outside the normal document flow by using absolute positioning and then apply CSS properties to trim the text:

.main-title {
  flex: 1;
  position: relative;
}

.main-title .title {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row mx-1">
    <div class="col" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Normal title
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row d-flex">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Answer №2

You have the option to utilize the text-truncate class in order to automatically truncate text (with ellipsis) according to the available space within a column.

To make this work, it's essential to place your content within columns (a practice that is generally recommended as directly adding content to rows can often lead to issues requiring unnecessary CSS workarounds).

The code snippet below demonstrates a cleaner implementation achieving the desired outcome through the use of the text-truncate class:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
.grey-div {
    width:50px;
    height:50px;
    background:gray;
    display: inline-block;
    vertical-align: top;
}
</style>

<div class="container-fluid">
    <div class="row mx-1">
        <div class="col px-0 mx-1" style="background:lightgray">
            <div class="row">
                <div class="grey-div"></div>
                <div>
                    <div class="title">
                        Normal title
                    </div>
                </div>
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </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

Container will keep items from spreading out

Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap prope ...

htmlcssflexboxbootstrap-5

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...

htmlcss

Leveraging HTML5's local storage functionality to save and manage a collection of list elements within `<ul>`

I need help with saving a to-do list in HTML so that it persists even after refreshing the browser. Can anyone assist me? html <!DOCTYPE html> <html> <head> <title>My To-Do List</title> <link rel="sty ...

javascriptjquerycsshtml

Is it possible to integrate a v-for loop within a Bootstrap grid for dynamic content rendering?

I am currently facing an issue with displaying my JavaScript objects in columns on my website. When using only HTML and CSS, the grid worked perfectly fine. However, after incorporating Vue into the mix, the columns now appear stacked vertically instead of ...

twitter-bootstraploopsvue.jsv-for

Using Vue.js 3 composition, I have encountered an issue where the v-if directive is not functioning as expected on two separate div

Is there a way to seamlessly toggle sections of the app in Vue.js 3 composition using v-if? I managed to make it work with the vue.js 2 API option initially, but since transitioning to vue.js 3 API Composition, the section isn't hiding despite screenM ...

javascripthtmlvue.jscomposition

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

javascripthtmlcssreactjsmaterial-ui

Storing values from a content script into textboxes using a button press: a simple guide

I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...

javascripthtmljsongoogle-chrome-extension

Is it possible to adapt Owl Carousel Liquid to function with percentages?

After successfully installing the owl carousel plugin, I noticed that it does not scale with the viewport size. This has been bothering me as I want the carousel to resize along with the items when the viewport becomes smaller. I attempted to set responsiv ...

jquerycssowl-carousel

Do we really need jquery.min.js in addition to bootstrap-4.0.0-alpha.6?

Recently, I've been experimenting with Bootstrap 4.0.0-alpha.6 by downloading the 'source' files. In some of the example themes located in 'bootstrap-4.0.0-alpha.6\bootstrap-4.0.0-alpha.6\docs\examples', such as nav ...

jquerybootstrap-4twitter-bootstrap-4

Express application is experiencing difficulty displaying the modal

After creating a webpage in HTML with a modal that pops up on button click using jQuery and Bootstrap, everything works perfectly when the files are on my desktop (css, js, fonts, index.html). However, when I transfer the page into my Express application ...

twitter-bootstrapexpressmodal-dialogrender

Unveiling the Mystery: Why YUI-3 Grids & Google Chrome Cause Overlapping Texts

Although I'm not well-versed in UI design, I find myself having to work on some CSS for a side project. Currently, I am utilizing YUI-3 files such as grids, reset, and fonts, all version 3.9.1. The main issue I am encountering is that the text inside ...

cssgoogle-chromeyui

What is the best way to implement a modal that can toggle dark mode using the Konami code, with the added functionality of a close button?

Recently, I attempted to create a Modal window that would activate when the Konami code (↑↑↓↓←→←→BA) is typed. As someone new to JavaScript, I'm still learning and open to feedback. While I have the coding part figured out, I need assi ...

javascripthtmljquerycssmodal-dialog

Setting the height of children within an absolutely-positioned parent element

I am facing an issue with adjusting the size of children elements based on their parent. The scenario is as follows: HTML <div class="video"> <div class="spot"> <img src="..." alt=""> <button>x</button> </div ...

htmlcsscss-position

How come I am unable to connect my CSS to my EJS files?

Having difficulty linking my css files to my ejs files. Using a standard node.js/express setup, I'm attempting to connect my main.css file from the public/css directory to my index.ejs file in views. The html and routing are functioning correctly. Ple ...

htmlcssnode.jsexpressejs

Tips for avoiding a noticeable sliding drawer when changing the direction of an HTML element

I am encountering an issue with the Daisy UI drawer component on my page. When I attempt to change the page direction using a JavaScript function, the drawer animates visibly from left to right or right to left, which is not the desired behavior. I have tr ...

htmlcsstailwind-cssdaisyui

Can you guide me on creating a horizontal scrolling feature using HTML, CSS, and React?

Struggling to create a horizontal scrolling component similar to Instagram stories? Here's what I've attempted so far: .scroller{ height: 125px; width: 300px; background-color: blue; overflow-x: scroll; overflow-y: hidden; } .itemC ...

htmlcssreactjsfrontendhorizontal-scrolling

Looking to create a row-column-row layout using CSS flexbox techniques

` I am trying to create a unique row-column-row layout using CSS flexbox. Below is the code snippet I have: * { padding: 0; margin: 0; box-sizing: border-box; } .container { display: flex; flex-wrap: wrap; gap: 0.2%; } .box { color: whit ...

htmlcss

Using Angular to pass parameters to a function

When passing a parameter to the getActiveId function in the ng-click <span class="col ion-ios7-heart-outline center" ng- click="getActiveId({{activeSlide.selected}})"> The value turns to zero in the controller, but it is passed correctly after tes ...

javascriptjqueryhtmlcssangularjs

What is the best way to customize media queries in a child theme?

Is it possible to override a media query in my Wordpress child theme? Currently, the media query is set at max-width: 1024px, but I would like it to be triggered at a smaller size, maybe around 700px. The issue arises when attempting to create a new media ...

csswordpresswordpress-themingmedia-queries

Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...

jquerycss