IE10 文本溢出省略号不起作用答案

【问题标题】：IE10 text-overflow ellipsis not workingIE10 文本溢出省略号不起作用
【发布时间】：2013-09-09 15:19:35
【问题描述】：

我在 html 中有一个 <a> 标记，我希望它是省略号。但是当我在<a> 标签内添加<div> 时，'text-overflow' 不起作用。

HTML：

<div class=boxed>
  <h1>text-overflow Attribute Sample</h1>
    <a href="#" class="caption">
      <!----><div style="width:100px;height:20px;border: 1px solid red"></div>
      Each box (div element) below contains the following text:
    </a>
</div>

CSS：

div.boxed {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    font: 14px Times New Roman, serif;
    overflow:hidden;
    'position:relative;
}
a.caption {
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display:block;
    text-decoration:none;
    float:left;
    text-align:left;
}

http://jsfiddle.net/nPzsy/

删除<div> 后，“文本溢出”再次起作用。

【问题讨论】：

在你的 CSS 中，' 就在 position: 之前。也在你的 jsFiddle 中。也许这是一个错误？
A 是一个内联元素。 Div 是一个块元素。您不应该将块元素放在内联元素中。

标签： internet-explorer-10 css

【解决方案1】：

首先，div是块级元素，a是内联级元素，所以不能在一个div中使用锚标签 b...所以你应该使用任何其他内联标签（如 small 、 span 等）

其次，如果您必须在 div 中使用 div，您可以将您的文本包装在另一个标签中，像这样 ....

<div class=boxed>
     <h1>text-overflow Attribute Sample</h1>
     <div class="caption">
         <!----><div style=" width:100px;height:20px;border: 1px solid red"></div>
         <span class='textTrunc'>Each box (div element) below contains the following text:</span>
  </div>

和 textTrunc 类的 css：

.textTrunc{  
    overflow:hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
    display:block;  
}

【讨论】：

实际上，在 HTML5 中，您可以使用 a 元素包装元素。