У меня есть этот 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 здесь.
вместо этого вы можете добавить изображение к последнему слову. что заставит его сломаться вместе.
добавить класс к слову
<strong class="test">word</strong>
и .test:after { ...
трюк также должен сделать этот класс inline-block
и если вы хотите сохранить подчеркивание, см. это.
добавить text-decoration:inherit;
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>
Это немного похоже на предыдущий ответ, но я подумал, что я полностью его объясню и полностью объясню.
Как только вы установите 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. И так как значок остается текстовым элементом, даже прямым текстом после его привязки, поэтому любая закрывающая пунктуация тоже будет завершена.
У меня была такая же проблема. Мне не очень понравилась идея добавления тегов 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;
}
Пожалуйста, убедитесь, что вы закончили тег перед
<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/
Это можно сделать без :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;
}
Я пытался сделать это с помощью кнопки ссылки и добился наибольшего успеха, добавив отступ справа от элемента, как предложил @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;
}
Если используется значок шрифта: Использование 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 предотвращает подергивание строк при переносе последнего слова и иконки.