CSS: Как удалить лишнее пространство, вызванное перерывом строки в ссылке?

Изменить 2: Мое время короткое, поэтому я буду использовать предложение Dippas об использовании фактического изображения вместо фона. Я держу этот вопрос открытым, если у кого-то есть лучшее решение. Спасибо вам за помощь!

Оригинальный вопрос/проблема:

Я был Google Googling для решения в течение часа, безрезультатно!

Я форматирую сайт, чтобы реагировать, и несколько длинных ссылок, которые содержат фоновое изображение, не ломаются правильно. Я пробовал float: left, display: block, display: inline-block, и никто из них не работает. Самое близкое, что я получил к исправлению, это его отображение: 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, я тоже сомневаюсь, что это имеет какое-то отношение к остальной части моего кода. Я не могу ссылаться на рассматриваемый сайт из-за конфиденциальности/условий контракта, но я надеюсь, что кто-то здесь может помочь мне с тем, что я могу предоставить. Спасибо!

Ответы

Ответ 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>

Ответ 2

Это дополнительное пространство не является ошибкой, идущей из ниоткуда.

Это происходит просто потому, что вы устанавливаете положение фона в 100% 50%, что означает 100% слева и 50% от вершины. Поскольку ширина вашего a равна 425px (поскольку ширина родительского элемента 425px, а дочерний элемент display: block, который занимает 100% доступной ширины), и ваша стрелка придерживается правого конца, очевидно, что быть зазором между правой стороной текста и левой стороной изображения.

Если значение background-position-x не было 100%, или ширина родительского элемента не была 425px, все было бы по-другому, как показано в следующих двух примерах.

Ответ 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;
}

Смотрите скрипку

Ответ 4

Изменить дополнение: 15px; на якорь. Добавить margin-right: 40px;.

UPDATE:

фоном-клип не требуется...

.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; - избегать перекрытия текста и стрелок, вы можете изменить его, чтобы уменьшить расстояние между стрелкой и текстом.