在 IE 和 chrome 中截断（带有 3 个点“...”）内容不起作用

Posted 2023-05-07

【中文标题】在 IE 和 chrome 中截断（带有 3 个点“...”）内容不起作用

【英文标题】：Truncate(with 3 dots "...") content in IE and chrome doesnt work

【发布时间】：2014-07-24 18:45:42

【问题描述】：

我有以下情况：

html：

 <input class="BWForm_form-control BWTextBox" disabled="disabled" id="something" title="Test Firma" type="text" value="Test Firma 11111111111111111111111111111"></input>

CSS：

    // trunicate text with "..." 3 dots, if the content is larger than the current width
input[disabled="disabled"]
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;

在 IE 和 chrome 中它不起作用，除了在 FireFox 中。

我也试过： text-overflow:ellipsis doesn't work on IE, text-overflow: ellipsis not working

但是没有影响..

如果没有固定宽度就好了，因为这些输入字段的宽度是不同的。

Ty 帮忙

【参考方案1】：

试试这个：

input[disabled="disabled"] 
    display: inline-block;
    max-width: 100px; /* Set a size */
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0px;
    padding-top: 0px;

【讨论】：

如果你必须设置省略号，你必须设置一个宽度......省略号的大小很重要:)

奇怪，它应该可以在 IE 上运行...你使用什么版本？你可以在这里查看 IE 上省略号的使用 - msdn.microsoft.com/en-us/library/ie/ms531174%28v=vs.85%29.aspx

我对照 IE 7、IE 8、IE 9 和 IE 10 对其进行了检查，但它们都没有使用它...

试试这个修复：input[disabled="disabled"]:before content: ''; /* IE 省略号修复 */

我插入了这个输入[disabled="disabled"]:before content: ''; /* IE 省略号修复 */ 在我现有的“input[disabled="disabled"]”前面，但我看不到任何更改...