选择中的 html css 3 点截断选项

Question

上面的图片是我所拥有的，但我希望我的选择中的选项像上面的元素一样被截断。

我的代码在下面。我希望有人可以帮助我，因为似乎没有一个工作。我按照 css 部分 .cutoff 中所示进行了尝试，但是那个使它的大小合适但没有在末尾添加 3 个点，这就是我想要的。

.box {
  background-color: #7cabbb;
}

.box p {
  /*display: inline-block;*/
  margin: 0 0 0px;
}

.truncate p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-group {
  display: flex;
}

.cuttoff {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="panel panel-main">
        <div class="panel-header">
          <div class="col-xs-8 truncate">
            <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
          </div>
          <div class="col-xs-4">
            <div class="btn-group">
              <button type="button" class="fa fa-bath"></button>
              <button type="button" class="fa fa-battery-full"></button>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <select class="cuttoff" size="8">
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
                        <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>

                    </select>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

.truncate p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-group {
  display: flex;
}

.cuttoff {
  width: 100%;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cuttoff option {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="panel panel-main">
        <div class="panel-header">
          <div class="col-xs-8 truncate">
            <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
          </div>
          <div class="col-xs-4">
            <div class="btn-group">
              <button type="button" class="fa fa-bath"></button>
              <button type="button" class="fa fa-battery-full"></button>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <select class="cuttoff" size="8">                       <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                       <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                      <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                      <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                     <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                     <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                     <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                    <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                    <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                     <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                     <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                      <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>                     <option>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</option>
           </select>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>