Html 防止选择标记中的文本与背景图像重叠

我有一个简单的

select

，它的宽度最多需要保持

200px

。我遇到的问题是，较长的文本出现在背景图像的顶部

我如何获得它，使选择保持

200px

，然后，如果存在较长的文本，它将不会与下拉箭头重叠

选择{
宽度：200px；
边界：0；
背景：#fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
背景尺寸：20px；
背景重复：无重复；
背景位置：右25px中心；
背景尺寸：15px；
-webkit外观：无；
-moz外观：无；
填充：10px 15px；
边框：1px实心#B8B9BA；
大纲：无；
边界半径：26px；
}

这个选项真的很长
中等长度选项
短的

只需增加正确的填充

选择{
宽度：200px；
边界：0；
背景：#fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
背景尺寸：20px；
背景重复：无重复；
背景位置：右25px中心；
背景尺寸：15px；
-webkit外观：无；
-moz外观：无；
填充：10px 50px 10px 15px；
边框：1px实心#B8B9BA；
大纲：无；
边界半径：26px；
}

这个选项真的很长
中等长度选项
短的

您可以使用

文本溢出：省略号属性


选择{
宽度：200px；
边界：0；
背景：#fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
背景尺寸：20px；
背景重复：无重复；
背景位置：右25px中心；
背景尺寸：15px；
-webkit外观：无；
-moz外观：无；
填充：10px 15px；
边框：1px实心#B8B9BA；
大纲：无；
边界半径：26px；
溢出：隐藏；
文本溢出：省略号；
右边填充：40px；
}

这个选项真的很长
中等长度选项
短的