截断样式在<a>标签内不起作用,但适用于<div>和<p>标签

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/