html - 裁剪链接内的长文本

Question

我创建了一个容器，其中包含几个链接。每个链接都有两件事:

1. 正文
2. 下载链接(稍后甚至可以更改为图片)

当我们调整浏览器大小时，我可以裁剪文本，但不能完全达到我想要的效果。

此文本不需要裁剪，因为它适合屏幕

此处的文本已被裁剪，但它正在将链接内的跨度向下推

有什么方法可以避免“下载”span 被下推吗？所以基本上链接中文本的文本裁剪应该在它溢出 span 时开始。 关于如何实现这一目标的任何想法？请注意，我希望整行(段落标记)成为链接，因为这将主要用于移动设备。

PS:我不想使用 javascript，因为我更喜欢纯粹使用 CSS。如果这不可能，可以使用一个简短的 jQuery 解决方案。

jsFiddle

HTML

<div class="box-white">
    <p><a href="#"> Short  <span>Download<span class="arrow">&gt;</span></span></a>
    </p>
    <p><a href="#"> Oh My God this description is more like an essay someone do something about this! <span>Download<span class="arrow">&gt;</span></span></a>
    </p>
</div>

CSS

.box-white {
    background: #fff;
    border: 1px solid #B4B7BB;
    border-radius: 10px;
}
.box-white p {
    color: #000;
    border-bottom: 1px solid #B4B7BB;
    font-weight: bold;
    margin: 0;
    padding: 10px;
}
.box-white p a {
    display: block;
    padding: 10px;
    margin: -10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.box-white p span {
    color: #4C556C;
    float: right;
    font-weight: normal;
}
a {
    color: #0085d5;
    text-decoration: none;
}

谢谢

Answer 1

交换描述和下载链接跨度的顺序应该可以解决问题:将右浮动跨度放在实际描述之前。

基于您的 fiddle :http://jsfiddle.net/fdyt2/2/

<p><a href="#"> <span>Download<span class="arrow">&gt;</span></span> Oh My God this description is more like an essay someone do something about this! </a>

使用跨度的左边距，您可以控制裁剪文本末尾与下载链接之间的距离。

这是 Chrome 中结果的屏幕截图: