防止select标签中的文本重叠背景图片

Question

我有一个简单的select，需要保持最多200px的宽度。问题是当文本内容过长时，会覆盖下拉箭头。

我该如何使select保持200px宽度，并且如果存在较长的文本，不会重叠到下拉箭头上方？

    select{
      width: 200px;
      border: 0;
      background: #fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: right 25px center;
      background-size: 15px;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 10px 15px;
      border: 1px solid #B8B9BA;
      outline:none;
      border-radius: 26px;
    }

<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>

- Freddy

Answer 1

只需增加右边距即可。

select{
      width: 200px;
      border: 0;
      background: #fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: right 25px center;
      background-size: 15px;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 10px 50px 10px 15px;
      border: 1px solid #B8B9BA;
      outline:none;
      border-radius: 26px;
    }

<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>

- Chaska

Answer 2

您可以使用CSS的text-overflow:ellipsis;属性。

select{
      width: 200px;
      border: 0;
      background: #fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: right 25px center;
      background-size: 15px;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 10px 15px;
      border: 1px solid #B8B9BA;
      outline:none;
      border-radius: 26px;
      overflow:hidden;
      text-overflow:ellipsis;
      padding-right:40px;
    }

<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>

- Alvaro Menéndez