Question

编辑2：我的时间很短，所以我将使用dippas建议使用实际图像而不是背景。我保持这个问题是公开的，万一有人有更好的解决方案。谢谢你的帮助！

原始问题/问题：

我一直在谷歌搜索解决方案一小时，但无济于事！

我正在将网站格式化为响应式，并且包含背景图像的多个长链接未正确破坏。我已经尝试了 float：left ， display：block ， display：inline-block ，但都没有。最接近修复的是将其设置为 display：inline ，但我宁愿将背景图像放在一边，而不是放在最后一个字旁边。

这是我第一次亲自咨询这个网站（我之前已经多次使用你的解决方案，所以谢谢！），所以我不能发布图片，但这是一个粗略的小提琴示例（编辑：这是一个新的小提琴，因为另一个有一个定义的div宽度）：

http://jsfiddle.net/2e28fanq/22/

（我想摆脱箭头与“教育”之间的额外空间）

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

看到它在JSFiddle中也发生过，我怀疑它与我的其余代码有什么关系。由于保密/合同原因，我无法链接到相关网站，但我希望有人可以帮助我提供我能够提供的服务。谢谢！

Answer 1

一个简单的解决方案是使用word-break: break-all：

＆＃13;

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

＆＃13;

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar</a>
  <div style="clear:both;"></div>
</div>

＆＃13;

fiddle

这也适用于长篇文章：

＆＃13;

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

＆＃13;

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar asdasd asd asd asda as Register for a FREE Educational Webinar asdasd asd asd asda as </a>
  <div style="clear:both;"></div>
</div>

＆＃13;

fiddle example with long text

Answer 2

额外的空间不是来自任何地方的错误。

这似乎只是因为您将背景位置设置为100% 50%，这意味着从左侧100％，从顶部50％。由于a的宽度为425px（因为父级的宽度为425px且子级为display: block，因此可用宽度的100％）并且您的箭头正在停留在右侧，文本右侧和图像左侧之间显然会有间隙。

如果background-position-x值不是100％，或者父级的宽度不是425px，则情况会有所不同，如下面的两个示例所示。

Answer 3

你是说这个意思吗？

HTML

<div class="wrap">
    <a href="#">Register for a FREE Educational Webinar</a>
</div>

和CSS

.wrap {
    display:inline;
    width:auto;
    padding: 15px;
    border: 1px solid #000;
}
a {
    width: auto;
    font-size: 1.5em;
    padding-right: 40px;
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat;
}

See fiddle

Answer 4

更改填充：15px;到锚点。 添加margin-right：40px; 。

<强>更新

背景剪辑不是必要的......

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

请参阅：http://jsfiddle.net/abrhmcc/75ybzLnz/3/

更改换行宽度以进行测试。

padding-right：40px; 是避免文字和箭头重叠，您可以更改它以减少箭头与文字之间的距离。

CSS：如何删除链接中换行引起的额外空白？

4 个答案: