如何清除浮点div区域并在相邻div溢出时显示省略号

Question

我正在寻找一种方法来实现我在调整窗口大小时暂时处理的两件事：

1. 当窗口缩小时，每个联系人右侧的消息图标应清除它们周围的区域，如图像2所示。实际上它与文本重叠（图像1）。 我尝试使用align：right而不是float，但调整大小时消息图标会消失。

2. 中心文本（名称和标签）应在窗口缩小时剪切消息图标时切换为省略号，如图像2（黄色标记）中所示。





有什么建议吗？ https://jsfiddle.net/mzyktbst/

CSS：

.unit {
  display: block;
  min-height: 50px;
  max-height: 50px;
  white-space: nowrap;
}

.img {
  float:left;
  margin: 0 15px 0 0;
  display: inline;
  text-overflow: ellipsis
}

.center {
  display: inline-block;
  line-height: 20px;
  text-overflow:ellipsis;
}

.mail {
  float: right;
  display: inline-block;
   margin: 0 0 0 15px;
}

HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="unit">
  <a href="">              
    <div class="img">
        <img src="https://ucarecdn.com/c10b3d36-979b-480f-898e-ff114a92db67/-/resize/50x50/"/>
    </div>
    <div class="center">
        Mark Edwards LargestLastNameEver
      <div class="tags">
        <span class="label label-warning">soccer</span>
        <span class="label label-warning">tennis</span>
        <span class="label label-warning">squash</span>
        <span class="label label-warning">bowling</span>
        <span class="label label-warning">football</span>
        <span class="label label-warning">swimming</span>
        <span class="label label-warning">uno</span>
        <span class="label label-warning">dos</span>
        <span class="label label-warning">uno</span>
        <span class="label label-warning">dos</span>
        <span class="label label-warning">uno</span>
        <span class="label label-warning">dos</span>
      </div>    
    </div>
  </a>
  <div class="mail">
    <a type="button" class="btn" href="">
      <span class="glyphicon glyphicon-envelope icon-mail"></span>
    </a>
  </div>
</div>

Answer 1

最后我明白了。更正：

1. 在中间div的定义之前，在html中添加float divs（左和右）。

2. 给中间div这些css属性：

   a）width: auto; //填充左右div所剩的整个空间。

   b）margin-left: auto;不要阻碍右浮动区域。

   c）margin-right: auto; //不要阻挡浮左区域。

   d）text-overflow:ellipsis; overflow:hidden; //在被右div阻挡时显示三点。