我在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;
}
删除<div>
后,“文字溢出”再次有效。
答案 0 :(得分:2)
首先, div 是块级元素, a 是内联级元素,因此您不能在内部使用 div 锚标记 b ...所以你应该使用任何其他内联标记(如小, 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;
}