Html 下拉框中溢出文本的省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7289769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ellipsis for overflow text in dropdown boxes
提问by pepsi
I'm fixing the width of one of my dropdown boxes (yes I know there are cross-browser issues with doing this).
我正在修复我的一个下拉框的宽度（是的，我知道这样做存在跨浏览器问题）。
Is there a non-js way to cut off overflowing text and append ellipses? text-overflow:ellipsis doesn't work for <select>elements (at least in Chrome).
有没有一种非 js 的方法来切断溢出的文本并附加省略号？text-overflow:ellipsis 不适用于<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>Example here: http://jsfiddle.net/t5eUe/
这里的例子：http: //jsfiddle.net/t5eUe/
采纳答案by s4y
HTML is very limited in what it specifies for form controls. That leaves room for operating system and browser makers to do what they think is appropriate (like the iPhone's modal selectwhich, when open, looks totally different from the traditional pop-up menu).
HTML 为表单控件指定的内容非常有限。这为操作系统和浏览器制造商留下了做他们认为合适的事情的空间（比如 iPhone 的模式select，当打开时，它看起来与传统的弹出菜单完全不同）。
It looks like most operating systems cut the selected option off without an elipsis. If you were able to change how the text gets cut off, it would look strange since that's not how select boxes work in the rest of the operating system.
看起来大多数操作系统在没有省略号的情况下切断了选定的选项。如果您能够更改文本被截断的方式，它看起来会很奇怪，因为在操作系统的其余部分中选择框不是这样工作的。
If it bugs you, you can use a customizable replacement, like Chosen, which looks distinct from the native select.
如果它让您感到困扰，您可以使用可自定义的替代品，例如Chosen，它看起来与本机select.
Or, file a bug against a major operating system or browser. For all we know, the way text is cut off in selects might be the result of a years-old oversight that everyone copied, and it might be time for a change.
或者，针对主要操作系统或浏览器提交错误。就我们所知，selects 中文本被截断的方式可能是每个人都抄袭多年的疏忽的结果，可能是时候改变了。
回答by Alex W
If you are finding this question because you have a custom arrow on your select box and the text is going over your arrow, I found a solution that works in some browsers. Just add some padding, to the select, on the right side.
如果您发现这个问题是因为您的选择框上有一个自定义箭头并且文本越过您的箭头，我找到了一个适用于某些浏览器的解决方案。只需select在右侧的, 中添加一些填充即可。
Before:
前：
After:
后：
CSS:
CSS：
select {
padding:0 30px 0 10px !important;
-webkit-padding-end: 30px !important;
-webkit-padding-start: 10px !important;
}
iOS ignores the paddingproperties but uses the -webkit-properties instead.
iOS 会忽略这些padding属性，而是使用这些-webkit-属性。
回答by pbyrne
The simplest solution might be to limit the number of characters in the HTML itself. Rails has a truncate(string, length)helper, and I'm certain that whichever backend you're using provides something similar.
最简单的解决方案可能是限制 HTML 本身的字符数。Rails 有一个truncate(string, length)帮助器，我确信您使用的任何后端都提供了类似的功能。
Due to the cross-browser issues you're already familiar with regarding the width of select boxes, this seems to me to be the most straightforward and least error-prone option.
由于您已经熟悉有关选择框宽度的跨浏览器问题，这在我看来是最直接且最不容易出错的选项。
<select>
<option value="1">One</option>
<option value="100">One hund...</option>
<select>
回答by Hariharasudan
You can use this:
你可以使用这个：
select {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
select option {
width:100px;
text-overflow:ellipsis;
overflow:hidden;
}
div {
border-style:solid;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
回答by Will P.
Found this absolute hack that actually works quite well:
发现这个绝对的 hack 实际上效果很好：
https://codepen.io/nikitahl/pen/vyZbwR
https://codepen.io/nikitahl/pen/vyZbwR
Not CSS only though.
不仅仅是 CSS。
The basic gist is to have a container on the dropdown, .select-containerin this case. That container has it's ::beforeset up to display contentbased on its data-contentattribute/dataset, along with all of the overflow:hidden; text-overflow: ellipsis;and sizing necessary to make the ellipsis work.
.select-container在这种情况下，基本要点是在下拉列表中有一个容器。该容器已::before设置为content基于其data-content属性/数据集显示，以及overflow:hidden; text-overflow: ellipsis;使省略号工作所需的所有和大小。
When the select changes, javascript assigns the value (or you could retrieve the text of the option out of the select.optionslist) to the dataset.content of the container, and voila!
选择更改时，JavaScript分配值（或者您可以将选项的文本检索到select.options列表中的文本）到容器的DataSet.Content和Voila！
Copying content of the codepen here:
在此处复制代码笔的内容：
var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";
selectContainer.dataset.content = select.value;
function handleChange(e) {
selectContainer.dataset.content = e.currentTarget.value;
console.log(select.value);
}
select.addEventListener("change", handleChange);span {
margin: 0 10px 0 0;
}
.select-container {
position: relative;
display: inline-block;
}
.select-container::before {
content: attr(data-content);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
left: 0;
padding: 7px;
font: 11px Arial, sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: capitalize;
pointer-events: none;
}
.select {
width: 80px;
padding: 5px;
appearance: none;
background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
background-size: 10px 10px;
color: transparent;
}
.regular {
display: inline-block;
margin: 10px 0 0;
.select {
color: #000;
}
}<span>Hack:</span><div class="select-container" data-content="">
<select class="select" id="words">
<option value="lingua latina non penis canina">Lingua latina non penis canina</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
<option value="lingua">Lingua</option>
<option value="latina">Latina</option>
<option value="non">Non</option>
<option value="penis">Penis</option>
<option value="canina">Canina</option>
</select>
</div>
<br />
<span>Regular:</span>
<div class="regular">
<select style="width: 80px;">
<option value="lingua latina non penis canina">Lingua latina non penis canina</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
<option value="lingua">Lingua</option>
<option value="latina">Latina</option>
<option value="non">Non</option>
<option value="penis">Penis</option>
<option value="canina">Canina</option>
</select>
</div>回答by dougajmcdonald
quirksmode has a good description of the 'text-overflow' property, but you may need to apply some additional properties like 'white-space: nowrap'
quirksmode 对 'text-overflow' 属性有很好的描述，但您可能需要应用一些额外的属性，如 'white-space: nowrap'
Whilst I'm not 100% how this will behave in a select object, it could be worth trying this first:
虽然我不是 100% 这在选择对象中的行为方式，但值得先尝试一下：
回答by chri3g91
CSS file
CSS文件
.selectDD {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
JS file
JS文件
$(document).ready(function () {
$("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});
回答by Mohammad Abdalhaleem
You can use this jQuery function instead of plus Bootstrap tooltip
你可以使用这个 jQuery 函数而不是加上 Bootstrap 工具提示
function DDLSToolTipping(ddlsArray) {
$(ddlsArray).each(function (index, ddl) {
DDLToolTipping(ddl)
});
}
function DDLToolTipping(ddlID, maxLength, allowDots) {
if (maxLength == null) { maxLength = 12 }
if (allowDots == null) { allowDots = true }
var selectedOption = $(ddlID).find('option:selected').text();
if (selectedOption.length > maxLength) {
$(ddlID).attr('data-toggle', "tooltip")
.attr('title', selectedOption);
if (allowDots) {
$(ddlID).prev('sup').remove();
$(ddlID).before(
"<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
)
}
}
else if ($(ddlID).attr('title') != null) {
$(ddlID).removeAttr('data-toggle')
.removeAttr('title');
}
}
回答by David Jones
I used this approach in a recent project and I was pretty happy with the result:
我在最近的一个项目中使用了这种方法，我对结果非常满意：
.select-wrapper {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
content: "";
background: linear-gradient(to right, transparent, white);
pointer-events: none;
}
}
Basically, wrap the select in a div and insert a pseudo element to overlay the end of the text to create the appearance that the text fades out.
基本上，将 select 包裹在一个 div 中并插入一个伪元素来覆盖文本的末尾以创建文本淡出的外观。
回答by Anja
Bit simplistic, but worked for me on browsers:
有点简单，但在浏览器上对我有用：
select {
font-size: 0.9rem;
}
