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

问题描述：

我正在修复我的下拉框之一的宽度（是的，我知道这样做有跨浏览器问题）。下拉框中的溢出文本的省略号

是否有一个非JS的方法来切断溢出文本并追加椭圆？文本溢出：省略号不适用于<select>元素（至少在Chrome中）。

这里举例： http://jsfiddle.net/t5eUe/

在Chrome 12中进行了测试，选择显示所有文本。没有任何东西被切断。 –

在Chrome 64.0.3282.167 –

答

HTML是什么规定了表单控件非常有限。这给操作系统和浏览器制造商留下了他们认为合适的空间（例如iPhone的模式select，它们在打开时与传统弹出式菜单完全不同）。

它看起来像大多数操作系统没有elipsis关闭选定的选项。如果您能够更改文本的截断方式，那看起来很奇怪，因为这不是选择框在其他操作系统中的工作方式。

如果错误，您可以使用可定制的替代品，如Chosen，它与原生select截然不同。或者，针对主要操作系统或浏览器提出错误提示。尽管我们知道，文本在select中被切断的方式可能是每个人都复制了数年之久的监督的结果，并且可能是更改的时候了。

答

最简单的解决办法可能是限制在HTML本身的字符数。 Rails有一个truncate(string, length)帮手，我确信你使用的任何后端提供了类似的东西。

由于你已经熟悉了有关的选择框宽度的跨浏览器的问题，这在我看来是最简单，最不容易出错的选择。

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

中工作不知道为什么你很难得到downvoted，但这是一个合理的解决方案。可能不是理想的，但仍然是一个体面的解决方案。 – adamj

是一个很好的替代品。 –

@adamj可能是因为他提出了一个特定于Rails的解决方案，因为他提出了一个独立于渲染，模板或服务器的HTML，CSS解决方案。 –

答

怪异模式具有“文本溢出”属性的一个很好的说明，但你可能需要申请像一些附加属性“白色空间：nowrap”选项

虽然我不是100％如何这将表现在选择对象时，它可能是值得尝试这第一次：

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

答

如果你是因为你有你的选择框自定义箭头和文字会在你的箭头发现这个问题，我发现，在一些浏览器上运行的解决方案。只需在右侧添加一些填充，即select。

前：

enter image description here

后：

enter image description here

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/

有没有办法在分界点的下拉列表中添加省略号？ – Blake

我真的觉得没有想到这一点愚蠢。谢谢Alex！ –

我不敢相信我几乎用了jquery

答

您可以使用此：

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浏览器中仍然存在这个问题 – Hariharasudan

答

你可以用它代替加引导提示

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

答

有点简单化这个jQuery的功能，但在所有的浏览器为我工作：

select { font-size: 0.9rem }

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

相关推荐