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

时间：2019-02-23 01:01:23

标签： css bootstrap-4

我正在尝试使用div.inbox-item-message截断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>

谢谢

2 个答案:

答案 0 :(得分：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>

希望这会有所帮助，

答案 1 :(得分：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-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>
相关问题
最新问题