Demo Fiddle

Question

如何制作此类参考或更正对齐和下划线链接？

<body>
<div class="div1">
    <a href="http://">
    <div><div class="div2">very long text very long text very long text</div><span>(0/1)</span></div>
</a>
</div>

.div1
{
    width:200px;
}
.div2
{   display:inline-block;
    width:140px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

http://jsfiddle.net/C76F7/1/

我需要在参考文献中使用文本溢出：省略号。

Answer 1

首先，我建议你考虑为什么要尝试这个以及是否有其他方法。然而，下面是完成它的相当肮脏的方式。只要a设置了宽度，内容就应该适当缩放。

Demo Fiddle

HTML

 <a href="http://">
        <div>very long text very long text very long text</div><div>(0/1)</div>
    </a>

CSS

a {
    display:table;
    table-layout:fixed;
    width:200px;
}
a div {
    display:table-cell;
}
a div:first-child {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
a div:last-child {
    width:35px;
}

<强>更新

另一种选择可能是简单地使用：

Demo Fiddle

HTML

 <a href="http://">
        <div>(0/1)</div>very long text very long text very long text
    </a>

CSS

a {
    display:inline-block;
    width:200px;
    padding-right:35px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}
a div {
    position:absolute;
    left:200px;
}

Answer 2

这里使用这个

.div2
{   display:inline-block;
    width:140px;
    text-overflow:ellipsis;
    overflow:hidden;
    text-decoration:underline;//for underline
    vertical-align:middle;//for vertical alignment
    white-space:nowrap;
}

如何定位<a> tag</a>

2 个答案:

Demo Fiddle

Demo Fiddle