如何使用动态bootstrap cols将溢出文本隐藏为省略号

Question

如何使用动态bootstrap cols将溢出文本隐藏为省略号

Mic*_*ael 6 html css twitter-bootstrap bootstrap-4

我正在尝试对齐卡片中的图标旁边的文本.该卡包含在Bootstrap"col"类中,该类根据行包含的项数动态确定其大小.

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

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

Run Code Online (Sandbox Code Playgroud)

我想要实现的目标

Answer 1

Tem*_*fif 4

一个想法是使用绝对位置使文本脱离流，然后添加一些 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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，8 月前
查看次数：	244 次
最近记录：	7 年，8 月前