Html CSS：如何删除链接中因换行而产生的额外空白？

编辑2:我的时间很短，因此我将使用dippas的建议，使用实际图像而不是背景。我保留这个问题，以防有人有更好的解决方案。谢谢你的帮助

原始问题：

a {
    display: block;
    float: left;
    width: auto;
    font-size: 1.5em;
    padding-right: 40px;
    background: url('Arrow-Right.png') 100% 50% no-repeat;
}

我已经在谷歌上搜索了一个小时的解决方案，但没有结果

我正在将一个站点格式化为响应性的，并且几个包含背景图像的长链接没有正确断开。我试过float:left、display:block、display:inline block，但都不起作用。我得到的最接近修复的东西是将其设置为显示：内联，但我宁愿将背景图像放在侧面，而不是放在最后一个单词的旁边

这是我第一次亲自咨询这个网站（我以前多次使用您的解决方案来摆脱困境，所以谢谢！），所以我无法发布图像，但这里有一个粗略的提琴示例（编辑：这里有一个新提琴，因为另一个提琴有一个定义的div宽度）：

（我想去掉箭头和“教育”之间的额外空间）

CSS:

a {
    display: block;
    float: left;
    width: auto;
    font-size: 1.5em;
    padding-right: 40px;
    background: url('Arrow-Right.png') 100% 50% no-repeat;
}

以下是我需要它做什么的粗略说明：

Register for a FREE Educational >
Webinar

它在做什么：

Register for a FREE Educational          >
Webinar

鉴于它也发生在JSFIDLE中，我怀疑它与我的其余代码有任何关系。由于保密/合同原因，我无法链接到有问题的网站，但我希望这里的人能帮助我完成我所能提供的。谢谢

你是说像这样吗

HTML

---

一个简单的解决方案是使用：

.wrap{
宽度：425px；
填充：15px；
边框：1px实心#000；
}
a{
显示：块；
浮动：左；
宽度：自动；
字号：1.5em；
右边填充：40px；
背景：url（'https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png’）100%50%不重复；
单词break：打破一切；
}

---

额外的空间不是来自任何地方的bug

它出现的原因很简单，因为您将背景位置设置为

100%50%

，这意味着距离左侧100%，距离顶部50%。由于

a

的宽度是

425px

（因为父级的宽度是

425px

，子级的宽度是

display:block

，占可用宽度的100%），并且箭头粘在右端，因此文本的右侧和图像的左侧之间显然会有间隙

如果

background-position-x

值不是100%，或者父对象的宽度不是

425px

，则情况会有所不同，如下两个示例所示

---

更改填充：15px；到锚点右加边距：40px

更新：

a {
    display: block;
    float: left;
    width: auto;
    font-size: 1.5em;
    padding-right: 40px;
    background: url('Arrow-Right.png') 100% 50% no-repeat;
}

背景剪辑不是必需的

见：

更改包裹的宽度以进行测试

右侧填充：40px是为了避免文本和箭头重叠，您可以更改它以缩短箭头和文本之间的距离

---

一点也不！我想让箭在断线时拥抱它的一侧，而不是拥抱最后一句话。我希望它保持在右边和中间对齐，但没有因换行而造成的巨大空间。好吧，我不明白“拥抱”是什么，但我指的是你的问题，删除了你的空间以及你关于“处理响应性布局”的信息，因此我提出了一个解决方案。尝试一种或多或少类似的方法，但再次强调，它与响应式布局有关（调整小提琴的大小，看看会发生什么，你的两行是随机的，你可能有一行、两行甚至三行，这就是为什么它被称为响应式），所以如果这不是你的意思，那我就不知道你在说什么了：根据你对Alex Char答案的评论，现在我看到你想要的是没有反应的，这与你的问题描述完全相反，因此与我所做的完全相反。这个答案不起作用，我知道行数会根据屏幕大小而变化。我担心的是，当一个单词移动到新行时，右边会有额外的空格，就好像这个单词仍然在那里一样，我正试图找到一种方法来删除这个空格。非常接近！有没有办法保持文字完整？同意。这似乎不是一个解决方案，因为它打破了中间的话，这是非常不自然的，似乎是不必要的。当我删除定义的div宽度并调整结果窗口的大小时，箭头仍在文本后面移动。我似乎无法理解基本问题。您想要实现一个响应性解决方案，其中箭头总是“几乎”粘在文本上？似乎是这样，如果是这样，最好使用img而不是backgroundYes（不幸的是，我会保持原样，但这是客户/QA的请求）。这里有一个更好的例子来说明我的问题：我的目标是在“网络研讨会”移到第二行时消除多余的空间。然后使用媒体提问有没有一种不固定宽度的方法？

.wrap {
    width: 425px;
    border: 1px solid #000;
}
a {
    display: block;
    float: left;
    width: auto;
    font-size: 1.5em;
    padding: 15px;
    margin-right: 40px;
    padding-right: 40px;
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% center no-repeat;
    background-clip: border-box;
    word-wrap: break-word;
}