小编Mic*_*ael的帖子

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

我正在尝试对齐卡片中的图标旁边的文本.该卡包含在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 …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap bootstrap-4

Mic*_*ael

2018 02-05

6
推荐指数

1
解决办法

244
查看次数