Html 裁剪链接中的长文本

我已经创建了一个容器，其中将包含几个链接。每个链接有两件事：

正文

下载链接（以后甚至可以更改为图像）

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

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

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

有没有办法避免“下载”按钮被按下？因此，基本上，链接中文本的文本裁剪应该在溢出

span

时开始。 有什么办法可以做到这一点吗？请注意，我希望整行（段落标记）是链接，因为这将主要用于移动设备

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

HTML

---

谢谢

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

.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;
}

---

交换描述和下载链接跨距的顺序应该可以做到：将浮点右跨距放在实际描述之前

根据你的小提琴：

使用跨距的左边距可以控制剪切文本的结尾与下载链接之间的距离

以下是Chrome中结果的屏幕截图：

---

我是不是遗漏了什么？你用的是什么浏览器？在Chrome中，无论是原版小提琴还是这款小提琴都不会cropping@YuriyGalanter您的浏览器是否支持文本溢出：省略号属性@Gigo我以为Chrome 29 for Windows支持一切。然而，下面查德给出的另一个答案显示了我的裁剪。奇怪的是，我在windows上也使用了Chrome，看起来非常好。啊，我想我明白了。我当时正全神贯注地看着它。我认为它总是会裁剪到特定的固定长度。但有足够的空间和全文显示。我调整了浏览器窗口的大小，使其更小，现在可以看到效果。绝对定位不是一个选项，因为它的行为不是我想要的调整浏览器大小时，您的示例无法正常工作。

.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;
}

.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;
}

<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>