为什么我不能让 Ellipsis 在 IE 11 上运行

Question

如果范围超出行大小，我会尝试显示一行句子后跟三个点 (...)。

我使用了下面的 CSS，它在 Mozilla 和 Chrome 上运行良好，但在 IE 11 上不起作用。

display: block;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 20px;

如果这是由于 IE11 上此省略号的任何版本问题或是否有修复程序，请告诉我。

Answer 1

IE11 支持 white-space:nowrap; & text-overflow:省略号;

这样试试

h2 {
    display: block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
    padding-right: 20px;    
}

Answer 2

试试这个代码，它将在 IE 11 中运行

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Answer 3

对于 IE，如果 readonly 属性设置为 readonly 或 true.

，则省略号仅适用于输入字段

$('.all-javascript input').on('focusout',
function() {
  $(this).prop('readonly', 'readonly')
})

$('.all-javascript input').on('focusin',
function() {
  $(this).prop('readonly', false)
})

div {
  margin: 40px 20px;
}

input {
  width: 300px;
  display: inline-block;
  white-space: nowrap 
  overflow:hidden;
  text-overflow:ellipsis; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="chrome">
  <input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te.">
</div>


<div class="ie-11">
  <input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te." readonly='readonly'>
</div>

<div class="all-javascript">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te.">
</div>

为什么我不能让 Ellipsis 在 IE 11 上运行

Why can't I get Ellipsis to work on IE 11

css

user-interface

internet-explorer-11

ellipsis