我如何使用省略号隐藏额外的div？ [英] How can I hide extra divs with an ellipsis?

查看：164
本文介绍了我如何使用省略号隐藏额外的div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个标签输入字段，我需要显示的数量与围绕它的假输入div一样多： 

 < div class =btn btn-secondary> 
< span class =tag>标签1< / span> 
< span class =tag>标签2< / span> 
< span class =tag>标签3< / span> 
< span class =tag>标签4< / span> 
<输入> 
< / div>

（我在那里以编程方式添加标签，一个Angular组件）。我的按钮类外部div假装是一个输入，并在里面我显示当前标签（样式）和实际输入的权利。
目标是显示一些标签，尽可能多的，然后为输入留下一些空间，如下所示： 

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

标签是样式的（并带有X按钮）。所以，如果我删除一些标签，我需要删除省略号（ ... ），如果我添加更多，它们不会显示（它们在工具提示中）。



输入具有最小宽度，但如果没有任何（或足够的）标签，它应该填充空格。因此，标记标记inpuuuuuuuuuuuuut 一直到右边界。如果我们删除一个标签，输入填充空间，如果我们添加一个，输入缩小（直到minWidth）。



什么是常识方式这样做？我想我需要让每个标签计算并报告宽度，然后让这个包装div选择多少个适合并隐藏其他标签，并在需要时添加省略号标签。有没有更简单的方法（需要IE11最低支持）？

一些柔性和定位（您可能需要根据您的情况调整一些值）

jsdata-hide =truedata-console =truedata-babel =false> 

  .btn {width：310px; border：1px solid;显示：flex; height：20px; margin-bottom：10px;} input {width：170px;}。btn> div {flex：1;位置：相对;身高：100％;}。btn> div> div {position：absolute; top：0;左：0;底部：0; overflow：hidden;}。btn> div> div：after {content：...;位置：绝对;正确：2px; bottom：5px;}。tag {background：#fff;位置：相对; z-index：2;}

< div class = BTN > < DIV> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < span class =tag>标签3< / span> < / DIV> < / DIV> < input>< / div>< div class =btn> < DIV> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < span class =tag>标签3< / span> < span class =tag>标签4< / span> < span class =tag>标签5< / span> < / DIV> < / DIV> < input>< / div>< div class =btn> < DIV> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < / DIV> < / DIV> < input>< / div>< div class =btn> < DIV> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < span class =tag>标签3< / span> < span class =tag>标签4< / span> < span class =tag>标签5< / span> < span class =tag>标签6< / span> < span class =tag>标签7< / span> < / DIV> < / DIV> < input>< / div>

b
$ b



现在，如果没有足够的标签，输入会向左延伸。



.btn {width：310px; border：1px solid;显示：flex; height：20px; margin-bottom：10px; overflow：hidden;} input {flex：1; min-width：170px;}。btn> div {position：relative;身高：100％; overflow：hidden;}。btn> div：after {content：...;位置：绝对;正确：2px; bottom：5px;}。tag {background：#fff;位置：相对; z-index：2;}

< div class = BTN > < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < span class =tag>标签3< / span> < / DIV> < input>< / div>< div class =btn> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < span class =tag>标签3< / span> < span class =tag>标签4< / span> < span class =tag>标签5< / span> < / DIV> < input>< / div>< div class =btn> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < / DIV> < input>< / div>< div class =btn> < DIV> < span class =tag>标记1< / span> < span class =tag>标签2< / span> < span class =tag>标签3< / span> < span class =tag>标签4< / span> < span class =tag>标签5< / span> < span class =tag>标签6< / span> < span class =tag>标签7< / span> < / DIV> < input>< / div>< div class =btn> < DIV> < span class =tag>标记1< / span> < / DIV> < input>< / div>< div class =btn> < DIV> < / DIV> < input>< / div>

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 (...) 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)?

解决方案

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

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

UPDATE

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

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

这篇关于我如何使用省略号隐藏额外的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆