下拉框中溢出文本的省略号答案

【问题标题】：Ellipsis for overflow text in dropdown boxes下拉框中溢出文本的省略号
【发布时间】：2011-09-02 22:21:54
【问题描述】：

我正在修复其中一个下拉框的宽度（是的，我知道这样做存在跨浏览器问题）。

有没有一种非 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>

这里的例子： http://jsfiddle.net/t5eUe/

【问题讨论】：

适用于 Chrome 64.0.3282.167
@JamesKhoury 你是什么意思，什么都没有被切断？当然，当您打开下拉菜单时，会显示全文。但是当关闭时，它会被切断，例如只显示“One - A long”之类的内容。

标签： html css

【解决方案1】：

注意：自 2020 年 7 月起，text-overflow: ellipsis 在 Chrome 上适用于 <select>

HTML 在为表单控件指定的内容方面受到限制。这为操作系统和浏览器制造商留出了空间，可以在该平台上做他们认为合适的事情（例如 iPhone 的模态 select，打开时看起来与传统的弹出菜单完全不同）。

如果您遇到问题，您可以使用可自定义的替换，例如 Chosen，它看起来与原生 select 不同。

或者，针对主要操作系统或浏览器提交错误。据我们所知，selects 中的文本被截断的方式可能是多年以来每个人都抄袭的疏忽的结果，可能是时候做出改变了。

【讨论】：

但这对我不起作用。我在 reactjs 中将 textOverflow 用于<Select>，但这对我不起作用。知道为什么吗？

【解决方案2】：

如果您发现这个问题是因为您的选择框上有一个自定义箭头并且文本超出了您的箭头，那么我找到了一个适用于某些浏览器的解决方案。只需在右侧的select 中添加一些填充。

之前：

之后：

CSS：

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS 会忽略 padding 属性，而是使用 -webkit- 属性。

http://jsfiddle.net/T7ST2/4/

【讨论】：

有没有办法在截止点的下拉菜单上添加省略号？
我真的觉得自己没有想到这一点很愚蠢。谢谢亚历克斯！
我不敢相信我几乎使用了一个 jquery
@Blake 试试overflow: hidden; white-space: nowrap;text-overflow: ellipsis;
iOS（至少 v9.3.5）似乎遵循标准 padding（即没有 -webkit 变体）。

【解决方案3】：

最简单的解决方案可能是限制 HTML 本身的字符数。 Rails 有一个truncate(string, length) 助手，我敢肯定你使用的任何后端都提供类似的东西。

由于您已经熟悉有关选择框宽度的跨浏览器问题，在我看来，这似乎是最直接且最不容易出错的选项。

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

【讨论】：

不知道你为什么这么难投票，但这是一个合理的解决方案。可能并不理想，但仍然是一个不错的解决方案。
@adamj 可能被否决了，因为当被问及独立于渲染、模板或服务器的 HTML、CSS 解决方案时，他建议了一个特定于 Rails 的解决方案。
@mohamed.ahmed 嗯，他确实说了下面的话..[...] and I'm certain that whichever backend you're using provides something similar. 并且大多数语言确实有truncate 方法，所以他的解决方案仍然是合理的。
解决方案仍然很差，因为在许多情况下您将拥有响应式布局，并且表单字段的宽度可能会有所不同。当字段在高清屏幕上为 200 像素宽时，为什么要将选项截断为少数字符（仅作为示例）？

【解决方案4】：

你可以用这个：

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;
}

【讨论】：

这仅在 Firefox 中修复，我在 Chrome 和 IE 浏览器中仍然存在此问题

【解决方案5】：

发现这个绝对有效的技巧：

https://codepen.io/nikitahl/pen/vyZbwR

不是只有 CSS。

基本要点是在下拉列表中有一个容器，在本例中为.select-container。该容器将其::before 设置为根据其data-content 属性/数据集显示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.options list) to the dataset.content of the container, and voila!

这里复制codepen的内容：

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>

【讨论】：

【解决方案6】：

** HTML ex. **

<select id="selectDropdownID">
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

CSS 文件

.selectDD {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;     
}

JS 文件

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});

【讨论】：

【解决方案7】：

quirksmode 对 'text-overflow' 属性有很好的描述，但您可能需要应用一些额外的属性，例如 'white-space: nowrap'

虽然我不是 100% 知道它在选择对象中的行为方式，但值得先尝试一下：

http://www.quirksmode.org/css/textoverflow.html

【讨论】：

【解决方案8】：

我在最近的一个项目中使用了这种方法，我对结果非常满意：

.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;
    }
}

基本上，将 select 包装在一个 div 中并插入一个伪元素以覆盖文本的末尾，以创建文本淡出的外观。

【讨论】：

很有趣，但是如果没有额外的样式看起来就不那么好了：jsfiddle.net/zb84v6m2
我喜欢这个主意！
@Paul 是的，假设您已经使用典型的包装器方法覆盖了股票浏览器样式，这一直是我采用的方法。

【解决方案9】：

你可以使用这个 jQuery 函数代替 plus 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');
    }
}

【讨论】：