Предотвратить: после переноса элемента на следующую строку

У меня есть этот HTML:

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

Я добавляю значок с помощью: после псевдоэлемента:

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

Проблема: если доступная ширина слишком мала, значок переносится на следующую строку. Я хотел бы, чтобы он оставался на той же строке, что и последнее слово ссылки, к которой он добавлен:

Это выполнимо, не добавляя 'nowrap' ко всей ссылке (я хочу, чтобы слова обертывались, а не значок).

См. jsFiddle здесь.

Ответ 1

вместо этого вы можете добавить изображение к последнему слову. что заставит его сломаться вместе.

добавить класс к слову <strong class="test">word</strong>

и .test:after { ...

http://jsfiddle.net/52dkR/

трюк также должен сделать этот класс inline-block

и если вы хотите сохранить подчеркивание, см. это.

http://jsfiddle.net/atcJJ/

добавить text-decoration:inherit;

Ответ 2

JSFiddle - http://jsfiddle.net/Bk38F/65/

Добавьте отрицательное поле к псевдоэлементу, чтобы компенсировать его ширину:

ul li.completed a:after {
    background:transparent url(img1.png) no-repeat; 
    content: ' ';
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: -24px;
}

Теперь это приведет к тому, что значок переполнит контейнер, и строка оборвется, только когда текст встретится с концом строки. Если вам нужно сохранить значок внутри оригинальной ширины контейнера, вы можете добавить отступы, чтобы компенсировать снова:

ul li.completed a {
    display: inline-block;
    padding-right: 24px;
}

ВАЖНОЕ ОБНОВЛЕНИЕ:

Чтобы этот метод работал, между текстом и закрывающим тегом элемента, содержащего псевдоэлемент, не должно быть пробелов. Несмотря на то, что ширина псевдоэлемента компенсируется отрицательным полем, пробел будет разрывать строку, когда он встречается с краем родительского элемента. Например, это работает:

<span>text goes here</span>

и это не так:

<span>
    text goes here
</span>

Ответ 3

Это немного похоже на предыдущий ответ, но я подумал, что я полностью его объясню и полностью объясню.

Как только вы установите display: inline-block, :after станет нетекстовым связующим элементом. Вот почему он обертывается, и почему nowrap не имеет никакого эффекта. Поэтому оставьте display в покое.

Как элемент текста по умолчанию, содержимое привязывается к предыдущему тексту, если между ними нет пробелов. Поэтому не добавляйте, но убедитесь, что у вас есть content: "", или это то же самое, что и display: none. Единственная проблема: height и width управляются content, которые в этом случае рушится. Итак, width - 0, а height - высота строки.

Измените размер области с заполнением; влево или вправо, это не имеет значения. Добавьте немного margin, чтобы значок не касался текста. Храните все как относительные размеры (em, pt и т.д.) И используйте background-size: contain, чтобы значок масштабировался с текстом, например, эможи или шрифтом. Наконец, поместите значок, где хотите, с помощью background-position.

ul li.completed a:after {
  content: "";
  background: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em; /* spacing*/
  padding-right: 0.75em; /* sizing */
}

Я использовал это для внешних ссылок (a[href*="://"]:after), и он отлично работал в Firefox, Chrome и iOS. И так как значок остается текстовым элементом, даже прямым текстом после его привязки, поэтому любая закрывающая пунктуация тоже будет завершена.

Ответ 4

У меня была такая же проблема. Мне не очень понравилась идея добавления тегов strong или span к последнему слову, поэтому я попытался просто добавить значок в качестве фонового изображения с отступом вправо вместо использования псевдоэлементов: after или: before. Работал на меня!

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last word</a></li></ul>

ul li.completed a {
background: url(img1.png) no-repeat 100% 50%;
padding-right: 18px;
}

http://jsfiddle.net/atcJJ/36/

Ответ 5

Пожалуйста, убедитесь, что вы закончили тег перед

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></a></li></ul>

Попробуйте приведенный ниже css. Вместо использования "после" используйте "до" и плавайте вправо.

ul li.completed a:before {
    background:transparent url(img1.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
    float:right;
}

Пожалуйста, проверьте это: http://jsfiddle.net/supriti/atcJJ/7/

Ответ 6

Это можно сделать без :after. Элемент с фоном должен быть display:inline.

<h1><span>I want the icon to stay on the same line as this last word</span></h1>

h1 span {
   padding-right: 24px;
   background: url('icon.svg') no-repeat right top; 
}

http://jsfiddle.net/my97k7b1/

Ответ 7

Я пытался сделать это с помощью кнопки ссылки и добился наибольшего успеха, добавив отступ справа от элемента, как предложил @Hugo Silva, затем установив :: after в абсолютную позицию. Это было довольно простое решение, и оно работало в современных браузерах.

.button {
  position: relative;
  color: #F00;
  font-size: 1.5rem;
  padding-right: 2.25rem;
}

.button::after {
  content: '>>';
  display: inline-block;
  padding-left: .75rem;
  position: absolute;
}

Здесь JS Fiddle.

Ответ 8

Если используется значок шрифта: Использование unicode \00a0 "неразрывный пробел" вместе с содержимым \00a0 (в данном случае это глиф Font Awesome).

Это работает без какой-либо дополнительной разметки, специального форматирования или имен классов.

a[href^='http']::after {
  content: '\00a0\f14c';
  font-family: 'Font Awesome 5 Pro', sans-serif;
  line-height: 0;
}

Высота line-height: 0; part предотвращает подергивание строк при переносе последнего слова и иконки.

Пример CodePen