All geek questions in one place

How to hide crowded text as ellipsis using dynamic bootstraps cols

I am trying to align the text next to the icon inside the map. The map is wrapped inside the "col" Bootstrap class, which dynamically determines its size depending on the number of elements contained in the string.

However, if there is not enough space, the text is wrapped and displayed in the second line. Now I'm trying to save the text next to the icon on one line and end it if there is not enough space with an ellipsis (three dots).

This plunker shows my current setting.

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

+4
source share
2 answers

, , 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>
Hide result
+2

text-truncate ( ) .

, ( , , css-).

, 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>
Hide result
+2

Source: https://habr.com/ru/post/1693192/

More articles:


All Articles