html - 在 IE 和 chrome 中截断(带 3 个点 "...")内容不起作用

Question

我有以下情况:

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

但是没有影响..

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

谢谢你的帮助

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