Question

我试图截断<a>标记显示的文字，但它不起作用。我将样式应用于其他标记样式，它确实有效（我看到的所有示例都没有使用<a>标记）。我想知道是否有人可以向我解释为什么会发生这种情况（我不是HTML / CSS中最好的）并帮助我实现它。这是我的代码。

如果知道我也使用.less。

CSS：

.blockTrunc{
    width: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML：

<a class="blockTrunc" href="#" >
    <i class="icon " ></i>{{{this.foo}}}: test length adder <span>{{this.bar}}-{{this.fizz}}</span>
</a>

Answer 1

您无法将text-overflow: ellipsis;应用于inline元素。您可以将a更改为display: inline-block;，然后就可以了。

<强> CSS：

.blockTrunc{
    display: inline-block;
    width: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JS小提琴： http://jsfiddle.net/z6cm4gcw/

Answer 2

W3 text-overflow docs州：

适用于：阻止容器

因此，您可以将其设为块容器，将其display属性设置为inline-block或block。

Updated JsFiddle

Answer 3

我已经解决了使用您所使用的类包装DIV的“A”元素：

<div class="blockTrunc">
<a href="#" >
    <i class="icon " ></i>{{{this.foo}}}: test length adder <span>{{this.bar}}-{{this.fizz}}</span>
</a>
</div>

http://jsfiddle.net/z6cm4gcw/

截断样式在<a> tags but works for <div> and <p> tags</p></div></a>内无法正常工作

3 个答案: