3

我创建了一个包含几个链接的容器。每个链接都有两件事：

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

谢谢

4

2 回答 2

3

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

根据您的小提琴：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 中结果的屏幕截图：

结果截图

于 2013-09-17T02:26:58.613 回答
0

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

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

小提琴

于 2013-09-17T02:26:40.493 回答