Ruben Ruben - 5 months ago 22
CSS Question

How to clear float div area and show ellipsis when adjacent div is overflow

I'm looking for a way to achieve two things I have been dealing for awhile when resizing window:


  1. The message icon at right side in each contact should clear the area around them when the window has shrunk, like in image 2. Actually it overlap texts (image 1).
    I have tried using align:right instead of float but the message icon disappear when resizing.

  2. The center text (name and tags) should switch to ellipsis when the message icon cut them when window shrunk, like in image 2 (yellow mark).



Wrong =(

Good =)

Any advice? 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

Finally I got it. Corrections:

  1. Add the float divs (left and right) in html before the definition of the middle div.
  2. Give the middle div these css attributes:

    a) width: auto; // Fill the whole space left available by right and left divs.

    b) margin-left: auto; Dont obstruct the area of floating right div.

    c) margin-right: auto; // Dont obstruct the area of floating left div.

    d) text-overflow:ellipsis; overflow:hidden; // Show the triple dot when obstructed by right div.