如何在 IE 上制作输入元素文本溢出：省略号？答案

【问题标题】：How to make input element text-overflow:ellipsis on IE?如何在 IE 上制作输入元素文本溢出：省略号？
【发布时间】：2015-06-26 17:11:49
【问题描述】：

我找到了我的

fiddle 只能在 Chrome 和 FF 上工作，我不知道为什么它在 IE 上没有省略号效果？希望有人能帮忙解决一下，如果能用CSS的方式解决就更好了。

顺便说一句，似乎 div 在 IE 和 Chrome 上都有 text-overflow:ellipsis 效果。

css:

.ellip {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

html:

<input type="text" class="ellip" value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
<div class="ellip">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>

【问题讨论】：

好的。我将代码更新到问题中。t 我在这里提供小提琴的原因是让您直接打开它以查看 IE 和 Chrome 中的不同行为
How to use text-overflow ellipsis in an html input field?的可能重复
@KawineshSK 这个好像没有解决办法……
@huanfeng 那里没有解决方案是有原因的
@KawineshSK 对不起，我没有在那里读到。真的，这是一个类似的问题，但明确地是关于 IE，这不是重复。

标签： html css internet-explorer

【解决方案1】：

.ellip:before {
content: ''; /* IE9 ellipsis fix */
}

示例：https://jsfiddle.net/svdbco/s1x0qx1a/

IE8截图：

IE11截图：

【讨论】：

它适用于屏幕截图中的按钮，但不适用于 input type="text" 元素。

【解决方案2】：

你期望看到什么效果？？？

用这个看看效果：

.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: clip;
    -ms-text-overflow: clip;
    text-overflow: clip;
 }

【讨论】：

我需要省略号效果
你的浏览器版本是多少？？它适用于 IE 版本 6 到上层
我不需要剪辑效果，我需要省略号效果，IE版本11