JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button onclick="kill();" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="ellipsis"><a href="#">Action</a></li>
    <li  class="ellipsis"><a href="#">Another</a></li>
    <li  class="ellipsis"><a href="#">xxxxxxxxxxxxxxxxxxxxxxSodsdsdsdsdmethdfdfdfdfdfdfdfdfdfing</a></li>
    <li  class="ellipsis"><a href="#">Separated</a></li>
  </ul>
</div>

<select style="width:50px;">
  <option style="width:50px;" class="ellipsis" value="volvo">Volxsxsxvo</option>
  <option style="width:50px;" class="ellipsis" value="saab">Saasxsxsxsxsxsxsxsxsxsxsxsxsxssxsxb</option>
  <option style="width:50px;" class="ellipsis" value="mercedes">Mercedes</option>
  <option style="width:50px;" class="ellipsis" value="audi">Audi</option>
</select>

CSS

.dropdown-menu {
    width: 60px !important;
}

  .ellipsis {
  text-overflow: ellipsis;
width:50px;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

JavaScript

function kill()
{
alert("lol");
}