我正在调整我的一个下拉框的宽度(是的,我知道这样做存在跨浏览器问题).

有没有一种非js的方法来截断溢出文本并追加省略?文本溢出:省略号不适用于<select>个元素(至少在Chrome中是这样).

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

下面是示例: http://jsfiddle.net/t5eUe/

推荐答案

截至2020年7月,NOTE:,在Chrome上text-overflow: ellipsis<select>

HTML在为表单控件指定的内容方面受到限制.这为操作系统和浏览器制造商在该平台上做他们认为合适的事情留下了空间(就像iPhone的MODEL select,当打开时,它看起来与传统的弹出式菜单完全不同).

如果它困扰您,您可以使用可定制的替代品,如Chosen,它看起来与本机select截然不同.

或者,针对主要操作系统或浏览器提交错误.据我们所知,select年代文本被切断的方式可能是多年来大家都在抄袭的疏忽造成的,现在可能是时候改变了.

Css相关问答推荐

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

媒体查询在生产中没有响应:React 18 应用程序

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行?

更改多边形外部的文本 colored颜色

Tailwind CSS 不输出背景类

flex-wrap 导致 children 身高加倍

从 React MUI 自定义不同组件的正确方法?

Tailwind CSS: Select 单选按钮时不应用同行判断的边框

before 元素的过渡效果

使用 React 和 Flexbox 文本溢出框外

我在 ins 标签中有一个 img 标签,更改 ins 格式覆盖图像的视图

使用 Webpack5 在 CSS 文件中内联字体和图像?

如何使半圆的边框淡出?

CSS3 的 :root 伪类和 html 有什么区别?

使用 CSS 剪辑/裁剪背景图像

将一行文本保留为单行 - 换行或不换行

媒体查询以错误的宽度触发

内联