JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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;
}