logo标签列表

CSS：text-overflow: ellipsis打乱布局

cssbootstrap-4
3

我正试图使用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>

谢谢

2个回答
2

.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-＃），你可以将消息正文的内容包装在类似下面这样的内容中，这也会给你期望的结果：
最初的回答来源：如何在Bootstrap响应式表格中使用省略号 

.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可以根据其他列的colspan自动调整列的大小。文档链接 - cyberpirate92
会调查一下。 - Miroslav Glamuzina
@cyberpirate92 更新了！发现一些类似问题的线程，有/存在一些hacky的方法来解决这个问题，但最好还是隐式地设置列宽（bootstrap），因为你已经知道在你的情况下想要的大小，干杯 :) - Miroslav Glamuzina
0

如果您添加了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 class编辑为.col-10以使其正常工作。

像这样：

            <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行。只是为了明确一下 :) - TLWebdesignNL
谢谢您的回答，但是这里的文档说明具有col的元素将根据兄弟列的colspan自动调整大小。 - cyberpirate92
感谢您的回复。我找到了真正的问题所在。它是由于 white-space: nowrap; 导致的。如果您使用了这个 CSS，您需要给父级 div 设置一个 min-width:0; 以防止它被打断。请参考此链接：https://codepen.io/aj-foster/pen/emBYPW - TLWebdesignNL
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接