Niel Niel - 6 months ago 16
HTML Question

Icon pushed down following overflow:hidden text

I read this question: Why is this inline-block element pushed downward?
and I think I understand the problem, but using any configuration of

display
isn't working, and
vertical-align: top
does not seem to solve the baseline issue because the element height is still messed up.

I made a plunker here, to give an example of my problem.

Is there a way to fix the height and keep the
overflow:hidden
property on the text?



button.overflow p {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}
button.normal p {
display: inline;
}
button.align i {
vertical-align: top;
display: inline-block;
}
button {
background: black;
color: white;
margin: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<button class="overflow">
<p>very long button text</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow">
<p>short</p><i class="fa fa-caret-down"></i>
</button>
<button class="normal">
<p>normal</p><i class="fa fa-caret-down"></i>
</button>
<button class="overflow align">
<p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>




Answer

* {
  box-sizing: border-box;
}
button {
  max-width: 100px;
}
button p {
  width: 80%;                /* dedicated space for text */
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  vertical-align: middle;    /* controls vertical-align of icon */
  margin: 0;                 /* remove default margin */
}
button i {
  width: 20%;                /* dedicated space for icon */
  display: inline-block;
}
button {
  background: black;
  color: white;
  margin: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />

<button class="overflow">
  <p>very long button text</p><i class="fa fa-caret-down"></i>
</button>

<button class="overflow">
  <p>short</p><i class="fa fa-caret-down"></i>
</button>

<button class="normal">
  <p>normal</p><i class="fa fa-caret-down"></i>
</button>

<button class="overflow align">
  <p>with vertical align</p><i class="fa fa-caret-down"></i>
</button>

jsFiddle

Comments