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

78

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

有没有一种非js的方法来切断溢出的文本并附加省略号？text-overflow：省略号不适用于<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/

html  css 
— 百事可乐
source
在Chrome 64.0.3282.167中工作
— Pranav Singh
@JamesKhoury是什么意思，什么都不会中断？当然，当您打开下拉列表时，将显示全文。但是当关闭时，它将被切断，例如，仅显示“一个-长”之类的内容。
— 丹尼尔·沃默斯

Answers:

39

注意：从2020年7月开始，text-overflow: ellipsis适用<select>于Chrome

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

如果您遇到问题，可以使用可定制的替换项，例如Chosen，它看起来与native不同select。

或者，针对主要操作系统或浏览器提交错误。就我们所知，以selects截断文本的方式可能是每个人都进行了多年的监督的结果，并且可能是时候进行更改了。

— s4y
source
40

如果由于选择框上有一个自定义箭头并且文本在箭头上而找到此问题，那么我找到了一种在某些浏览器中有效的解决方案。只需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/

— 亚历克斯·W
source
10
有没有办法在截止点的下拉列表上添加省略号？
— 布莱克
2
老实说，我没有考虑这一点而感到愚蠢。谢谢亚历克斯！
— 克里斯·李斯
我不敢相信我几乎用过一个jQuery <select>替换库来实现这一目标（facepalem）。
— 国王
3
@Blake tryoverflow: hidden; white-space: nowrap;text-overflow: ellipsis;
— GreaterKing，
iOS（至少v9.3.5）似乎遵循标准padding（即没有-webkit变体）。
— 科南'18
11

最简单的解决方案可能是限制HTML本身中的字符数。Rails有一个truncate（string，length）助手，并且我确定您所使用的后端都提供类似的东西。

由于您已经很熟悉跨浏览器的问题，涉及选择框的宽度，因此在我看来，这是最简单，最不容易出错的选项。

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>
— 拜恩
source
4
不知道为什么要这么辛苦地投票，但这是一个合理的解决方案。可能不理想，但仍然是一个不错的解决方案。
— adamj 2015年
@adamj可能被否决了，因为当有人问有关独立于渲染，模板或服务器的HTML，CSS解决方案的问题时，他建议了一种特定于Rails的解决方案。
— mohamed.ahmed
1
@ mohamed.ahmed好吧，他确实说了以下话。[...] and I'm certain that whichever backend you're using provides something similar.大多数语言确实都有一种truncate方法，因此他的解决方案仍然是合理的。
— adamj
3
解决方案仍然很差，因为在许多情况下，您将具有响应式布局，并且表单字段的宽度可能会有所不同。当该字段在高清屏幕上为200px宽时，为什么要将选项截断为全角字符（仅作为示例）？
— lxg
6

您可以使用此：

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;
}
— 哈里哈拉苏丹
source
9
这仅在Firefox中修复，我在Chrome和IE浏览器中仍然存在此问题
— Hariharasudan 2015年
4

发现了这种绝对有效的技巧，实际上效果很好：

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

不仅限于CSS。

.select-container在这种情况下，基本要点是在下拉菜单上有一个容器。该容器已::before设置为content根据其data-content属性/数据集以及overflow:hidden; text-overflow: ellipsis;使省略号起作用所需的所有尺寸和大小进行显示。

当选择的变化，JavaScript的分配值（或者你可以检索选项的文本出的select.options列表）的容器，瞧的dataset.content！

在此处复制代码笔的内容：

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>
展开摘要

— 威尔·P
source
2

CSS文件

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

JS文件

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

您可以使用此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');
    }
}
— 穆罕默德·阿卜杜勒海勒姆（Mohammad Abdalhaleem）
source
1

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

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

基本上，将选择包装在div中，然后插入一个伪元素以覆盖文本的结尾，以创建文本淡出的外观。

在此处输入图片说明

— 戴维·琼斯
source
有趣，但没有额外的样式看起来就不太好：jsfiddle.net/zb84v6m2
— Paul
我喜欢这个主意！
— 尚塔尔
@Paul是的，假设是您已经使用典型的包装方法覆盖了股票浏览器的样式，这始终是我采用的方法。
— David Jones
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.