CSS：文本溢出：省略号会破坏布局

【问题标题】：CSS: text-overflow: ellipsis breaks layoutCSS：文本溢出：省略号会破坏布局
【发布时间】：2019-02-23 11:12:57
【问题描述】：

我正在尝试使用text-overflow:ellipsis 截断div.inbox-item-message 中的文本，但只要发生截断，就会破坏布局。

在运行下面的示例时，您可以看到第二个项目的文本被截断并且布局变得混乱。

如何解决？

.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>

谢谢

【问题讨论】：

    标签： css bootstrap-4


    【解决方案1】： 

    .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-#），你可以将消息正文的内容包装在这样的东西中，这也会给你预期的结果：

    来源：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>

    希望对你有帮助，

    【讨论】：

    • 感谢您的回答，我认为.col 可用于根据其他列的列跨度自动调整列大小。 documentation
    • 会调查的
    • @cyberpirate92 已更新！发现一些有类似问题的线程，有/是 hacky 方法来实现这一点，但最好隐式输入列宽（引导程序），因为您已经知道您想要的大小，干杯:)
    【解决方案2】：

    如果你添加 col 类，你应该总是添加 colspan。例如，您的 .row.inbox-item 中有一个 col-2 和一个 col 类。如果你在同一级别上添加所有类，你应该总共有 12 个。所以如果你有两个 div，就像你的例子一样，你应该将你在第一个 .col-2 div 之后剩下的 10 个添加到另一个 div并将 .col 更改为 .col-10。

    在您缺少 cols 的其他地方也是如此。像“col inbox-item-title”应该是“col-8 inbox-item-title”，因为在同一级别上已经有一个 col-4。

    我尝试了你的代码，你应该在 col-2 类 div 到 col-10 之后编辑你的 col 类以使其工作。

    像这样：

                <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>

    【讨论】：

    • 我上面的代码块中的第 5 行。只是要清楚:)
    • 感谢您的回答，但文档 here 指出具有 col 的元素将根据兄弟列的 colspan 自动调整大小。
    • 感谢您的回复。我发现了真正的问题。这是空白：nowrap；如果你有那个 css，你需要给父 div 一个 min-width:0;所以它不会破裂。看到这个：codepen.io/aj-foster/pen/emBYPW
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-22
    • 1970-01-01
    • 2012-04-13
    • 2013-07-20
    • 2015-07-06
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode