Using the CSS property "text-overflow: ellipsis" can sometimes disrupt the layout

I'm having an issue with truncating text in div.inbox-item-message using the property text-overflow:ellipsis. The problem is that whenever the text is truncated, it disrupts the layout.

If you run the example below, you'll notice that the second item's text gets cut off and the layout breaks.

Any suggestions on how to fix this?

.inbox {
    border: 1px solid black;
    background-color: black;
    color: white;
}

/* Remaining CSS styling rules here */
 
.inbox-header-actions {
    text-align: right;
}
<!DOCTYPE html>
<html lang="en">

<!-- Rest of the HTML content goes here -->
    
</html>

Thank you!

Answer №1

.custom-container {
    border: 1px solid black;
    background-color: black;
    color: white;
}
.custom-image {
    padding: 0;
}
.custom-image img {
    width: 100%
}
.custom-item {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
    padding: 2%;
    border-bottom: 0.5px solid gray;
}
.custom-item:hover {
    background: lightblue;
    color: black;
}
.custom-timestamp {
    text-align: right;
    font-size: 75%;
}
.custom-message {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.custom-header {
    padding: 3%;
    border-bottom: 1px solid white;
}
.custom-actions {
    text-align: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
        integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
    <link href="./style.css" rel="stylesheet">
</head>

<body>
    <div class="container-fluid">
        <div class="chat-container">
            <div class="row">
                <div class="col-12 custom-container">
                    <div class="row custom-header">
                        <div class="col-11 inbox-header-title">
                            <span class="h5"> <span class="fa fa-comments"></span>
                                Conversations</span>
                        </div>
                        <div class="col-1 custom-actions">
                            <span class="fa fa-filter"></span>
                        </div>
                    </div>
                    <div class="row inbox-item">
                        <div class="col-2 custom-image align-self-center">
                            <img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-10 inbox-item-title">
                                    <span>Chat #10</span>
                                </div>
                                <div class="col-2 custom-timestamp">
                                    8:48 AM
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-11 custom-message">
                                    <span class="inbox-item-sender">Person 1:</span> Hello, how are you?
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    
                    <!-- more code here -->

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

</html>

Update: If you really must let the columns be able to automatically resize (not set the col-#), you could follow a similar structure as provided in the source link below:

Source: How to work with ellipsis in bootstrap responsive table

.custom-container {
    border: 1px solid black;
    background-color: black;
    color: white;
}

.custom-image {
    padding: 0;
}

.custom-image img {
    width: 100%
}

.custom-item {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
    padding: 2%;
    border-bottom: 0.5px solid gray;
}

.custom-item:hover {
    background: lightblue;
    color: black;
}

.custom-timestamp {
    text-align: right;
    font-size: 75%;
}

.custom-message {
    //  overflow: hidden;
    //  white-space: nowrap;
    //  text-overflow: ellipsis;
    //    line-height:1;
}

.hackyWrapper {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
    width: 95%;
}

.hackyWrapper:before {
    content: '';
    display: inline-block;
}

.custom-header {
    padding: 3%;
    border-bottom: 1px solid white;
}

.custom-actions {
    text-align: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
  <link href="./style.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="chat-container">
      <div class="row">
        <div class="col-12 custom-container">
          <div class="row custom-header">
            <div class="col custom-header-title">
              <span class="h5"> <span class="fa fa-comments"></span> Conversations
              </span>
            </div>
            <div class="col-3 custom-actions">
              <span class="fa fa-filter"></span>
            </div>
          </div>
          <div class="row custom-item">
            <div class="col-2 custom-image align-self-center">
              <img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
            </div>
            <div class="col">
              <div class="row">
                <div class="col custom-item-title">
                  <span>Chat #10</span>
                </div>
                <div class="col-4 custom-timestamp">
                  8:48 AM
                </div>
              </div>
              <div class="row">
                <div class="col custom-message">
                  <span class='hackyWrapper'>
                                    <span class="inbox-item-sender">Person 1:</span> Hello, how are you?
                  </span>
                </div>
                <div class="col-2 custom-unreadcount">
                  <span class="badge badge-pill badge-secondary">2</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- more code here -->

        </div>
        <div class="col" class="conversation">

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

</html>

Hope this modified version serves your purpose,

Answer №2

Ensure that when adding a col class, you also include the colspan attribute. For example, if you have a col-2 and a col class inside your .row.inbox-item, the total should add up to 12 when all classes are combined on the same level. Therefore, if you have two divs as in the provided example, allocate the remaining 10 after the first .col-2 div to the other div and change .col to .col-10.

The same rule applies for other instances where columns are missing. For instance, "col inbox-item-title" should be corrected to "col-8 inbox-item-title" since there is already a col-4 present at the same level.

I have tested your code, and you need to adjust the col class following the col-2 class div to col-10 in order to make it functional.

Here is how the corrected code should look:

<div class="row inbox-item">
    <div class="col-2 inbox-item-display-picture align-self-center">
        <img src="https://cdn3.iconfinder.com/data/icons/business-round-flat-vol-1-1/36/user_account_profile_avatar_person_student_male-512.png">
    </div>
    <div class="col-10">
        <div class="row">
            <div class="col-8 inbox-item-title">
                <span>Chat #10</span>
            </div>
            <div class="col-4 inbox-item-timestamp">
                8:48 AM
            </div>
        </div>
        <div class="row">
            <div class="col-10 inbox-item-message">
                <span class="inbox-item-sender">Person 1:</span> Hello, how are you?
            </div>
            <div class="col-2 inbox-item-unreadcount">
                <span class="badge badge-pill badge-secondary">2</span>
            </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

I'm curious about the specific purpose of /1 in font styling at 16px

Can anyone explain the purpose of /1 in the font: 16px/1 style declaration? I removed the /1 from the code and noticed increased spacing between lines. What is the specific role of /1 in this situation? body { font: 16px/1 'Open Sans', sans ...

React Drag and Drop: Div Resisting Dragging

I recently attempted to create a drag and drop list feature in a React app without using any external packages. I came across a tutorial that claimed to achieve this. This is the code I implemented: class App extends React.Component { state = { ite ...

Adjusting the size of content tags depending on their popularity

Currently, I am working on setting up a basic tagging system by following the database structure provided in this Stack Overflow post. My goal is to create a single page that showcases all the tags, with each tag being visually scaled based on its popular ...

Begin highlighting the columns in the table with color starting from the Nth column onwards using the td

Is there a more efficient way to apply a specific background color to multiple columns in a table without using a CSS class for each column? I have a large table with many rows and columns, and I want to minimize unnecessary code. Currently, I am utilizi ...

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

What is the best way to select both an inline element and a block-level element at the same time?

After receiving a shortcode from a WordPress theme, the output is: <div class="heading clearfix"><i class="icon icon-list-ol h2"></i> <h2> Hello World! </h2></div> I am looking to style both the icon and h2 elements to ...

Incorporating Bootstrap SCSS files into a Django application

My query pertains to the most recent Bootstrap 4.x release (beta) I bring in the CSS from the CDN using <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6 ...

Is the embedded audio player not showing up on the screen?

I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...

Ways to create the initial row text in jqgrid treegrid appear bold

Trying to make the text in the first row of a jqgrid treegrid bold? Here's what I attempted: #tree-grid .cell-wrapper { font-weight: bold; } However, this makes all nodes bold. How can I make only the first node (first row) bold? The treegrid i ...

"Enhance Your Website with jQuery UI Tooltips Featuring HTML Content

Is there a way to customize the appearance of tooltips using jQuery UI Tooltip? I want to format tooltips similar to the image shown below for HTML content. Example: JavaScript: $(function () { $.widget("ui.tooltip", $.ui.tooltip, { optio ...

Storing a Business Hierarchy in Browser Storage with JavaScript

I have developed a hierarchical tree structure on an HTML page where users can customize a company's organizational chart based on their needs. However, I am looking to store this structured data in local storage so that it can be utilized on another ...

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

Filtering a webpage using JQuery by clicking to delete specific divs or sections

I have implemented a dropdown button at the top of my blog-style website to allow users to filter the content. Each blog post is contained within section tags. When a user clicks on a menu item, it triggers a click event. I am trying to save the href, whi ...

Assign a class to the "li" element containing an "a" tag with the specified href attribute

Is it possible to transform the "href" attribute of an element into a class or id like "li" for better css handling? <ul> <li><a href="#section3"><span class="fp-sr-only">due</span><span></span></a><d ...

I am attempting to display the Δ symbol on my website, however, it is not appearing on the webpage

In my attempt to display my company logo on the website, I encountered an issue where the Δ symbol is not appearing correctly in the browser. strong class="footer-logo">KyΔnsys</strong To address this problem, I have implemented unicode charset=" ...

How can you reduce the size of the bootstrap navbar without utilizing less?

I've been attempting to reduce the height of Bootstrap 3.1.1's navbar without utilizing the less version. Despite trying various methods from different sources, I haven't been able to decrease the CSS's .navbar height. However, I did m ...

How can I create a jagged CSS gradient effect?

Check out the example below to see my desired outcome in action. I can clearly distinguish between the two, but if it's not clear to you, here's another image for reference. ...

Is it feasible to have content wrap around a Grid-Item?

I've been experimenting with the new CSS Grids layout module to arrange my content. I have a set of paragraphs that are 8 columns wide, and I'm looking to insert a figure that spans 3 columns in columns 1-3. After that, I want the following parag ...

Mastering CSS selectors with jQuery

My desire to delve into the world of jQuery has ignited. From my perspective, jQuery simply selects the desired element and performs actions on it. However, I find the selection process closely resembling CSS selectors, a realm with which I am not well-ver ...

Heatmap of the day's hours - Issue with displaying colors

I've been working on creating a d3.js heatmap chart, and I've encountered an issue with the colors. Initially, I used code from this link and then modified it to read data from a PHP file that outputs JSON format data. However, after making these ...