IE10文本溢出省略号不起作用 [英] IE10 text-overflow ellipsis not working

问题描述

我在html中有一个<a>标记，我希望它是省略号.但是，当我在<a>标记内添加<div>时，文本溢出"无效.

I have an <a> tag in html, and I want it to be ellipsis. But when I add a <div> inside the <a> tag, 'text-overflow' doesn't work.

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>后，文本溢出"会再次起作用.

After removing the <div>, the 'text-overflow' works again.

推荐答案

首先， div 是一个块级元素，而 a 是一个内联级元素，因此您不能在锚点标签 b 中使用 div ...，因此您应该使用其他任何内嵌标签(例如 small ， span 等)

First of all, div is a block level element and a is an inline level element, so you cannot use a div inside an anchor tag b...so you should use any other inline tag (like small , span etc)

第二，如果必须在 div 内使用 div ，则可以将文本包装在另一个这样的标记中…….

Secondly, if you have to use a div inside div, you can wrap your text in another tag like this ....

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

这篇关于IE10文本溢出省略号不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！