css - CSS：文本溢出：省略号会破坏布局
问题描述
我试图在div.inbox-item-messageusing中截断文本text-overflow:ellipsis，但是每当发生截断时，它都会破坏布局。
在运行下面的示例时，您可以看到第二个项目的文本被截断并且布局变得混乱。
如何解决这个问题？
.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>谢谢
解决方案
.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>更新：如果你真的必须让列能够自动调整大小（不设置col-#），你可以将消息正文的内容包装在这样的东西中，这也会给你预期的结果：
资料来源：如何在引导响应表中使用省略号
.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>希望这可以帮助，
推荐阅读
- postgresql - Azure PostgreSQL 突然使用所有存储
- python - PyOpenGL - 获取绘制图像的深度图
- microsoft-graph-api - 无法创建日历事件 webhook
- mysql - 从 Integrity 读取变量，并用 perl 获取到 sql
- mysql - MySQL Procedurde 内 if 语句？
- python - python 3d立方体到2d gif
- jenkins - Checkmarx 和 OWASP 依赖检查
- android - Why do I get "Unresolved reference" for a class that the project does allow to reach?
- laravel - Laravel route with where clause not working as expected
- apache-spark - Spark结构化流式kafka依赖无法解决