Ellipsis For Overflow Text in Dropdown Boxes

.select {  box-sizing: border-box;  display: block;  width: 200px;  height: 34.5px;  padding: 5px 22px 3px 11px;  font: 400 16px/24px sans-serif;  color: #464a4c;  vertical-align: middle;  background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM+CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc+Cg==) no-repeat right 6px top 13px;  border: 1px solid #D6D6D6;  border-radius: 0;  -moz-appearance: none;  -webkit-appearance: none;  position:relative;
}div {  position:relative;  display:inline-block;}div:after {      content: '...';    display: block;    background-color: #fff;    height: 15px;    width: 25px;    color: #464a4c;    position: absolute;    right: 23px;    bottom: 11px;    text-align: center;    pointer-events: none;}

<div><select class="select">  <option selected>select Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="1">1 Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="2">2 Mississippi Mississippi Mississippi Mississippi Mississippi</option>  <option value="3">3 Mississippi Mississippi Mississippi Mississippi Mississippi</option></select></div>

How to clip text overflow bootstrap dropdown button

This is because your caret and text is inside the button...

So just wrap the dropdown text into a span and apply white-space property to that span instead of button...

And to white-space to work you have to define a max-width property too.

Also changed your jQuery code to change the text...

Updated Fiddle

Stack Snippet

$(".dropdown-menu li a").click(function() {  $(this).parents(".dropdown").find('.btn span.text').text($(this).data('value'));});

.btn-default.dropdown-toggle .text {  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;  max-width: 100px;  display: inline-block;  vertical-align: middle;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    <span class="text">Dropdown Dropdown Dropdown</span>    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#" data-value="action">Action</a></li>    <li><a href="#" data-value="another action">Another action</a></li>    <li><a href="#" data-value="something else here">Something else here</a></li>    <li><a href="#" data-value="separated link">Separated link</a></li>  </ul></div>

$('select').on('change', function() {
  $(this).find('option').removeClass('selected');
  $(this).find('option:selected').addClass('selected');
});

select,
option.selected {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>Ellipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown Boxes</option>
  <option>Ellipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown BoxesEllipsis For Overflow Text in Dropdown Boxes</option>
</select>