78730

How can I hide extra divs with an ellipsis?

I have a tag input field and I need to show just as many as will fit into the fake "input" div surrounding it, like this:

<div class="btn btn-secondary"> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> <span class="tag">Tag 4</span> <input> </div>

(I add tags programatically there, an Angular component). My outer div with the button class is pretending to be an input, and inside I show current tags (styled) and the actual input to the right of them. The goal is to show a few tags, as much as will fit, and then leave a bit of space for the input, like this:

________________________________ | tag1 tag2 tag3 ... _INPUT_ | ---------------------------------

The tags are styled (and with an X button). So if I remove a few tags, I need to remove the ellipsis (<strong>...</strong>) and if I add more, they are not to be shown (they're in a tooltip).

The input has a minimum width, but it should fill up space if there aren't any (or enough) tags. So, tag tag inpuuuuuuuuuuuuut all the way to the right border. And if we remove one tag, the input fills up the space, if we add one, input shrinks (up until minWidth).

What would be a common-sense way to doing this? I am thinking that I would need to have each tag calculate and report it's width, then have that wrapper div pick how ever many will fit and hide the others, and add the ellipsis tag if needed. Is there a simpler way (IE11 minimum support needed)?

Answer1:

Here is a crazy idea using some flex and positionning (you may have to adjust some values depending on your situation)

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

.btn {
  width: 310px;
  border: 1px solid;
  display: flex;
  height: 20px;
  margin-bottom: 10px;
}

input {
  width: 170px;
}

.btn > div {
  flex: 1;
  position: relative;
  height: 100%;
}

.btn > div > div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

.btn > div > div:after {
  content: "...";
  position: absolute;
  right: 2px;
  bottom: 5px;
}

.tag {
  background: #fff;
  position: relative;
  z-index: 2;
}
<div class="btn">
  <div>
    <div>
      <span class="tag">Tag 1</span>
      <span class="tag">Tag 2</span>
      <span class="tag">Tag 3</span>
    </div>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <div>
      <span class="tag">Tag 1</span>
      <span class="tag">Tag 2</span>
      <span class="tag">Tag 3</span>
      <span class="tag">Tag 4</span>
      <span class="tag">Tag 5</span>
    </div>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <div>
      <span class="tag">Tag 1</span>
      <span class="tag">Tag 2</span>
    </div>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <div>
      <span class="tag">Tag 1</span>
      <span class="tag">Tag 2</span>
      <span class="tag">Tag 3</span>
      <span class="tag">Tag 4</span>
      <span class="tag">Tag 5</span>
      <span class="tag">Tag 6</span>
      <span class="tag">Tag 7</span>
    </div>
  </div>
  <input>
</div>


<strong>UPDATE</strong>

Now the input will stretch to the left in case there is no enough tags:

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

.btn {
  width: 310px;
  border: 1px solid;
  display: flex;
  height: 20px;
  margin-bottom: 10px;
  overflow: hidden;
}

input {
  flex: 1;
  min-width: 170px;
}

.btn > div {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.btn > div:after {
  content: "...";
  position: absolute;
  right: 2px;
  bottom: 5px;
}

.tag {
  background: #fff;
  position: relative;
  z-index: 2;
}
<div class="btn">
  <div>
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
    <span class="tag">Tag 4</span>
    <span class="tag">Tag 5</span>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
    <span class="tag">Tag 4</span>
    <span class="tag">Tag 5</span>
    <span class="tag">Tag 6</span>
    <span class="tag">Tag 7</span>
  </div>
  <input>
</div>
<div class="btn">
  <div>
    <span class="tag">Tag 1</span>
  </div>
  <input>
</div>
<div class="btn">
  <div>
  </div>
  <input>
</div>


Answer2:

<div class="btn btn-secondary"> <div class="tag-box"> <span class="tag">Tag 1</span> <span class="tag">Tag 223131</span> <span class="tag">Tag 31231</span> <span class="tag">Tag 4</span> <span class="tag">Tag 5</span> </div> <input> </div> .tag-box { display: block; border: 1px solid; max-width: 140px; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-box .tag { display: inline; overflow: hidden; text-overflow: ellipsis; }

https://jsfiddle.net/dm7bmzky/34/

Recommend

  • Bootstrap 3 truncate text in column on condensed table adding padding
  • How to relabel ellipsis button for modal UITypeEditor in PropertyGrid?
  • How to read CDATA from an XML file in Node Sax
  • How can I combine multiple rows into one column using PostgreSQL?
  • HTML Entities with jQuery
  • Controlling ellipsis style in CSS
  • Why does Internet Explorer sometimes trigger a local storage event before the data's ready? [du
  • Converting RVML to SVG using XSLT in C#
  • Touch events over two dom elements?
  • Maven repository location is not updated in eclipse
  • Efficiently getting XML into Elasticsearch
  • Team Foundation Server 2015 vs. Bitbucket Server (Stash)
  • How to get the url of a file of google drive to download in android
  • Is there an easy way to associate an event with a ListViewItem?
  • Typecasting `this` of a base class template to its derived class
  • Entity Framework ObjectContext: Concurrency
  • Want to understand iframe breakout code
  • Bound DataGridViewCheckBoxColumn not updating binding source
  • How do I mock an exported typescript function in a jasmine test?
  • SyntaxError: (irb):26: both block arg and actual block given
  • Salesforce Different WSDL files and when to use
  • presentShareDialogWithParams posts to FB wall, but callback handler results say error
  • With Hadoop, can I create a tasktracker on a machine that isn't running a datanode?
  • Time complexity of a program which involves multiple variables
  • Checking free space on FTP server
  • Spark fat jar to run multiple versions on YARN
  • Regex thinks I'm nesting, but I'm not
  • What is the “return” in scheme?
  • How to disable jQuery.jplayer autoplay?
  • Running Map reduces the dimensions of the matrices