在链接中裁剪长文本

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

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

。

基于你的小提琴：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中结果的屏幕截图：

Answer 2

您可以使用绝对定位。尝试添加以下内容：

.box-white p a {
    position: relative;
    padding-right: 100px;
    width: 200px;
}

.box-white p a > span {
    color: #4C556C;
    font-weight: normal;
    position: absolute;
    right: 0;
}

Fiddle