Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS: text-overflow: ellipsis breaks layout

Tags:

css

bootstrap-4

I am trying to truncate text in div.inbox-item-message using text-overflow:ellipsis, but whenever the truncation happens, it breaks the layout.

On running the example below, you can see that the second item's text gets truncated and the layout gets messed up.

How to solve this?

.inbox {
    border: 1px solid black;
    background-color: black;
    color: white;
}
.inbox-item-display-picture {
    padding: 0;
}
.inbox-item-display-picture img {
    width: 100%
}
.inbox-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;
}
.inbox-item:hover {
    background: lightblue;
    color: black;
}
.inbox-item-timestamp {
    text-align: right;
    font-size: 75%;
}
.inbox-item-message {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.inbox-header {
    padding: 3%;
    border-bottom: 1px solid white;
}
.inbox-header-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 inbox">
                    <div class="row inbox-header">
                        <div class="col inbox-header-title">
                            <span class="h5"> <span class="fa fa-comments"></span>
                                Conversations</span>
                        </div>
                        <div class="col-3 inbox-header-actions">
                            <span class="fa fa-filter"></span>
                        </div>
                    </div>
                    <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">
                            <div class="row">
                                <div class="col 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 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>
                    <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_employee_male-2-512.png">
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col inbox-item-title">
                                    <span>Chat #11</span>
                                </div>
                                <div class="col-4 inbox-item-timestamp">
                                    8:50 AM
                                </div>
                            </div>
                            <div class="row">
                                <div class="col inbox-item-message">
                                    <span class="inbox-item-sender">Person 2:</span> Some really long message here lorem
                                    ipsum
                                </div>
                                <div class="col-2 inbox-item-unreadcount">
                                    <span class="badge badge-pill badge-secondary">1</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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">
                            <div class="row">
                                <div class="col inbox-item-title">
                                    <span>Chat #12</span>
                                </div>
                                <div class="col-4 inbox-item-timestamp">
                                    yesterday
                                </div>
                            </div>
                            <div class="row">
                                <div class="col inbox-item-message">
                                    <span class="inbox-item-sender">Person 3:</span> Short message
                                </div>
                                <div class="col-2 inbox-item-unreadcount">
                                    <span class="badge badge-pill badge-secondary">3</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col" class="conversation">
                    
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Thanks

like image 236
cyberpirate92 Avatar asked Dec 18 '25 09:12

cyberpirate92

1 Answers

.inbox {
    border: 1px solid black;
    background-color: black;
    color: white;
}
.inbox-item-display-picture {
    padding: 0;
}
.inbox-item-display-picture img {
    width: 100%
}
.inbox-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;
}
.inbox-item:hover {
    background: lightblue;
    color: black;
}
.inbox-item-timestamp {
    text-align: right;
    font-size: 75%;
}
.inbox-item-message {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.inbox-header {
    padding: 3%;
    border-bottom: 1px solid white;
}
.inbox-header-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 inbox">
                    <div class="row inbox-header">
                        <div class="col-11 inbox-header-title">
                            <span class="h5"> <span class="fa fa-comments"></span>
                                Conversations</span>
                        </div>
                        <div class="col-1 inbox-header-actions">
                            <span class="fa fa-filter"></span>
                        </div>
                    </div>
                    <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-10 inbox-item-title">
                                    <span>Chat #10</span>
                                </div>
                                <div class="col-2 inbox-item-timestamp">
                                    8:48 AM
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-11 inbox-item-message">
                                    <span class="inbox-item-sender">Person 1:</span> Hello, how are you?
                                </div>
                                <div class="col-1 inbox-item-unreadcount">
                                    <span class="badge badge-pill badge-secondary">2</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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_employee_male-2-512.png">
                        </div>
                        <div class="col-10">
                            <div class="row">
                                <div class="col-10 inbox-item-title">
                                    <span>Chat #11</span>
                                </div>
                                <div class="col-2 inbox-item-timestamp">
                                    8:50 AM
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-11 inbox-item-message">
                                    <span class="inbox-item-sender">Person 2:</span> Some really long message here lorem
                                    ipsum
                                </div>
                                <div class="col-1 inbox-item-unreadcount">
                                    <span class="badge badge-pill badge-secondary">1</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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">
                            <div class="row">
                                <div class="col-10 inbox-item-title">
                                    <span>Chat #12</span>
                                </div>
                                <div class="col-2 inbox-item-timestamp">
                                    yesterday
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-11 inbox-item-message">
                                    <span class="inbox-item-sender">Person 3:</span> Short message
                                </div>
                                <div class="col-1 inbox-item-unreadcount">
                                    <span class="badge badge-pill badge-secondary">3</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--TODO: <div class="col-12" class="conversation"></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 wrap the contents of the message body inside something like this and this will also give you your expected resulted:

Source: How to work with ellipsis in bootstrap responsive table

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

.inbox-item-display-picture {
  padding: 0;
}

.inbox-item-display-picture img {
  width: 100%
}

.inbox-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;
}

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

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

.inbox-item-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;
}

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

.inbox-header-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 inbox">
          <div class="row inbox-header">
            <div class="col inbox-header-title">
              <span class="h5"> <span class="fa fa-comments"></span> Conversations
              </span>
            </div>
            <div class="col-3 inbox-header-actions">
              <span class="fa fa-filter"></span>
            </div>
          </div>
          <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">
              <div class="row">
                <div class="col 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 inbox-item-message">
                  <span class='hackyWrapper'>
                                    <span class="inbox-item-sender">Person 1:</span> Hello, how are you?
                  </span>
                </div>
                <div class="col-2 inbox-item-unreadcount">
                  <span class="badge badge-pill badge-secondary">2</span>
                </div>
              </div>
            </div>
          </div>
          <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_employee_male-2-512.png">
            </div>
            <div class="col">
              <div class="row">
                <div class="col inbox-item-title">
                  <span>Chat #11</span>
                </div>
                <div class="col-4 inbox-item-timestamp">
                  8:50 AM
                </div>
              </div>
              <div class="row">
                <div class="col inbox-item-message">
                  <span class='hackyWrapper'>
                                    <span class="inbox-item-sender">Person 2:</span> Some really long message here lorem Some really long message here lorem ipsum
                  </span>
                </div>
                <div class="col-2 inbox-item-unreadcount">
                  <span class="badge badge-pill badge-secondary">1</span>
                </div>
              </div>
            </div>
          </div>
          <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">
              <div class="row">
                <div class="col inbox-item-title">
                  <span>Chat #12</span>
                </div>
                <div class="col-4 inbox-item-timestamp">
                  yesterday
                </div>
              </div>
              <div class="row">
                <div class="col inbox-item-message">
                  <span class='hackyWrapper'>

                                    <span class="inbox-item-sender">Person 3:</span> Short message
                  </span>
                </div>
                <div class="col-2 inbox-item-unreadcount">
                  <span class="badge badge-pill badge-secondary">3</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col" class="conversation">

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

</html>

Hope this helps,

like image 153
Miroslav Glamuzina Avatar answered Dec 21 '25 05:12

Miroslav Glamuzina
Sign in to Comment

Related questions

How to stop main <li> from closing when clicking an <li> within it
How to make nested tabs sticky in a Quarto dashboard?
scrollTop offset() not animating/working correctly with divs inside of container
How to set <td> to the same size of an <img>
Placing image over text
Make content fit parent container
Combine background image with rgba but without gradient
Overriding CSS Reset with the Univeral Selector
Is there a way with CSS to add space between the cursor, and the placeholder text in an input?
How to center caption who sibling element is rotated 45 degs
Checkbox values fail if not selected?
Change CSS-Style Color Value with JavaScript
Border of Boostrap cards
HTML Elements get misplaced when zoomed in
What property controls width when flex-direction is set to "column"?
How to apply margin right to nav bar not affecting the navbar collapse using Bootstrap?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!