html - CSS:如何删除链接中由换行符引起的额外空白？

Question

编辑 2: 我的时间很短，所以我将采纳 dippas 的建议，即使用实际图像而不是背景。我将这个问题保持开放状态，以防万一有人有更好的解决方案。感谢您的所有帮助!

原始问题/问题:

我已经在谷歌上搜索了一个小时的解决方案，但无济于事!

我正在将网站格式化为响应式，但包含背景图片的多个长链接未正确断开。我试过 float: left、display: block、display: inline-block 都没有用。我最接近修复的方法是将其设置为 display: inline，但我宁愿将背景图像放在一边而不是紧挨着最后一个词。

这是我第一次亲自咨询这个网站(我以前多次使用你的解决方案摆脱困境，所以谢谢!)，所以我不能发布图片，但这里有一个粗略的 fiddle 示例(编辑: 这是一个新的 fiddle ，因为另一个 fiddle 有定义的 div 宽度):

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

(我想去掉箭头和“Educational”之间的多余空格)

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 中，我怀疑它与我的其余代码有任何关系。由于保密/契约(Contract)原因，我无法链接到相关网站，但我希望这里有人可以帮助我解决我能够提供的问题。谢谢!

Answer 1

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

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

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

fiddle

这也适用于长文本:

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

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

fiddle example with long text