Question

我试图将卡片中的图标旁边的文字对齐。卡被包裹在Bootstrap＆＃34; col＆＃34;根据行包含的项数动态确定其大小的类。

但是，如果没有足够的空间，文本将被包装并显示在第二行。现在我想要实现的是将文本旁边的文字保留在一行上，如果没有足够的空格和省略号（三个点），则将其结束。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  </head>

  <body>

    <div class="row mx-1">
      <div class="col" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Normal title
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
      <div class="col mx-1" style="background:lightgray">
        <div class="row">
          <div style="width:50px;height:50px;background:gray"></div>
          <div>
            <div class="title">
              Long title which should end with ellipsis
            </div>
          </div>
        </div>

      </div>
    </div>

  </body>

</html>

What I'm trying to achieve

Answer 1

一个想法是使用绝对位置使文本脱离流程，然后添加一些CSS属性来裁剪文本：

.main-title {
  flex: 1;
  position: relative;
}

.main-title .title {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row mx-1">
    <div class="col" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Normal title
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
    <div class="col mx-1" style="background:lightgray">
      <div class="row d-flex">
        <div style="width:50px;height:50px;background:gray"></div>
        <div class="main-title">
          <div class="title">
            Long title which should end with ellipsis
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Answer 2

您可以使用text-truncate类根据列中的可用空间自动截断（并添加省略号）。

要实现这一目标，您需要将内容放入列中（无论如何都应该这样做，因为将内容直接放入一行往往会导致需要不必要的css hacks的问题）。

在下面的代码段中，您会看到使用text-truncate类获得所需结果的更清晰的代码版本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
.grey-div {
    width:50px;
    height:50px;
    background:gray;
    display: inline-block;
    vertical-align: top;
}
</style>

<div class="container-fluid">
    <div class="row mx-1">
        <div class="col px-0 mx-1" style="background:lightgray">
            <div class="row">
                <div class="grey-div"></div>
                <div>
                    <div class="title">
                        Normal title
                    </div>
                </div>
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
        <div class="col px-0 mx-1 text-truncate" style="background:lightgray">
            <div class="title text-truncate">
                <div class="grey-div"></div>
                Long title which should end with ellipsis
            </div>
        </div>
    </div>
</div>

如何使用动态bootstrap cols

2 个答案: