Html 使用CSS在Select中隐藏长文本

我有一个选择框，其中有一些溢出的文本。它看起来不太好，我想找到一种方法，使用CSS来解决这个问题

代码：

选择{
高度：2.4375雷姆；
填充：0.5雷姆；
边框：1px实心#cacaca；
保证金：0.01勒姆；
字号：1.1rem；
字体家族：继承；
线高：正常；
颜色：#0A0A；
背景色：#fefe；
边界半径：3px；
-webkit外观：无；
-moz外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景尺寸：9px 6px；
背景位置：右中；
背景来源：内容框；
背景重复：无重复；
/*不是在我的代码中，而是在一个小容器中为模拟select而添加的演示：*/
最大宽度：130像素；
}

--请选择--
拯救
教育类
徖生署；遗传学
捐赠
在最需要的地方

这里有一种方法

在

选择

元素中添加一些右填充，例如30px，并设置一个

宽度

值，例如200px

然后，调整背景位置，使水平偏移为宽度减去填充170px

您可以调整数字以获得所需的样式

选择{
高度：2.4375雷姆；
填充：0.5雷姆；
右侧填充：30px；
边框：1px实心#cacaca；
保证金：0.01勒姆；
字号：1.1rem；
字体家族：继承；
线高：正常；
颜色：#0A0A；
背景色：#fefe；
边界半径：3px；
-webkit外观：无；
-moz外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景尺寸：9px 6px；
背景位置：170px中心；
背景来源：内容框；
背景重复：无重复；
/*不是在我的代码中，而是在一个小容器中为模拟select而添加的演示：*/
宽度：200px；
}

--请选择--
拯救
教育类
徖生署；遗传学
捐赠
在最需要的地方

这里有一种方法

在

选择

元素中添加一些右填充，例如30px，并设置一个

宽度

值，例如200px

然后，调整背景位置，使水平偏移为宽度减去填充170px

您可以调整数字以获得所需的样式

选择{
高度：2.4375雷姆；
填充：0.5雷姆；
右侧填充：30px；
边框：1px实心#cacaca；
保证金：0.01勒姆；
字号：1.1rem；
字体家族：继承；
线高：正常；
颜色：#0A0A；
背景色：#fefe；
边界半径：3px；
-webkit外观：无；
-moz外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景尺寸：9px 6px；
背景位置：170px中心；
背景来源：内容框；
背景重复：无重复；
/*不是在我的代码中，而是在一个小容器中为模拟select而添加的演示：*/
宽度：200px；
}

--请选择--
拯救
教育类
徖生署；遗传学
捐赠
在最需要的地方

这只是一次黑客攻击。增加右侧填充，并将图像背景位置更改为百分比

希望这有帮助

选择{
右边填充：15px！重要；
高度：2.4375雷姆；
填充：0.5雷姆；
边框：1px实心#cacaca；
保证金：0.01勒姆；
字号：1.1rem；
字体家族：继承；
线高：正常；
颜色：#0A0A；
背景色：#fefe；
边界半径：3px；
-webkit外观：无；
-moz外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景尺寸：9px 6px；
背景位置：112%50%；
背景来源：内容框；
背景重复：无重复；
/*不是在我的代码中，而是在一个小容器中为模拟select而添加的演示：*/
最大宽度：130像素；
}

--请选择--
拯救
教育类
徖生署；遗传学
捐赠
在最需要的地方

这只是一次黑客攻击。增加右侧填充，并将图像背景位置更改为百分比

希望这有帮助

选择{
右边填充：15px！重要；
高度：2.4375雷姆；
填充：0.5雷姆；
边框：1px实心#cacaca；
保证金：0.01勒姆；
字号：1.1rem；
字体家族：继承；
线高：正常；
颜色：#0A0A；
背景色：#fefe；
边界半径：3px；
-webkit外观：无；
-moz外观：无；
背景图像：url（'data:image/svg+xml；utf8'）；
背景尺寸：9px 6px；
背景位置：112%50%；
背景来源：内容框；
背景重复：无重复；
/*不是在我的代码中，而是在一个小容器中为模拟select而添加的演示：*/
最大宽度：130像素；
}

--请选择--
拯救
教育类
徖生署；遗传学
捐赠
在最需要的地方