css - 如何在相邻div溢出时清除 float 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 div(左和右)。

2. 给中间的 div 这些 css 属性:

   a) width: auto;//填充左右 div 留下的整个可用空间。

   b) margin-left: auto; 不要遮挡右侧 float 区域

   c) margin-right: auto;//不要遮挡左侧 float 区域

   d) 文本溢出:省略号； overflow:hidden;//当被右侧 div 遮挡时显示三重点。