1

我在 html 中有一个<a>标签,我希望它是省略号。但是当我<div>在标签内添加一个时<a>,“文本溢出”不起作用。

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>,“文本溢出”再次起作用。

4

1 回答 1

2

首先,div是块级元素,a是内联级元素,所以你不能在锚标签b内使用div ...所以你应该使用任何其他内联标签(如smallspan等)

其次,如果你必须在 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;  
}
于 2013-09-09T07:09:57.400 回答