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
