Я хочу добавить значок Font Awesome к последнему слову в текстовой строке:
foo bar●
Но если требуется перенос строки, я хочу, чтобы значок прикреплялся к последнему слову и обертывал их:
foo
bar●
Моя проблема очень похожа на: Предотвратить: после переноса элемента в следующую строку
Однако решение предполагает, что у меня есть доступ к последнему слову. В моем случае текст будет генерироваться динамически. Есть ли способ css/html только для того, чтобы значок обертывался последним словом?
Здесь jsfiddle.
Интересно, что мне показалось, что вам нужно изменить одну строку кода, чтобы это работало.
Тестирование вашего элемента .container2 в jsFiddle, измените это
.container2:after {
font-family: FontAwesome;
content: "\f111";
display: inline-block;
}
к
.container2:after {
font-family: FontAwesome;
content: "\f111";
display: inline;
}
Кажется, что с любой шириной я устанавливаю контейнер и буду оставаться подключенным к тому, что когда-либо будет foo.
Я просто хотел указать, почему изменение, которое @Unmocked предоставило, действительно работает, и оно связано с разницей между отображением: встроенным и отображенным: inline-block.
Чтобы пояснить здесь немного информации о различии между дисплеем block и inline.
Блок-дисплей
Элементы block, в общем, являются элементами, которые вызывают макет. Они получают свою собственную ограничительную рамку и имеют возможность в какой-то степени подталкивать другие элементы, чтобы вписаться в пространство, доступное в области рендеринга браузера. Примеры элементов block: h1, p, ul и table. Обратите внимание, что каждый из этих элементов по умолчанию запускает новую строку, а также закрывает собственную строку при закрытии. Другими словами, они вписываются в блок текста, создавая свой собственный раздел уровня абзаца.
Встроенный дисплей
inline элементы, как правило, отображаются в строке с текстом. Другими словами, они предназначены для отображения с в тексте . Примеры включают i, b или span. Обратите внимание, что каждый из этих элементов по умолчанию продолжает поток его окружающего текста, не форсируя новую строку перед или после себя.
Введите средний случай...
Отображение встроенного блока
inline-block является гибридом двух вышеперечисленных. По сути, элемент inline-block запускается везде, где его предыдущий текст не работает, и пытается вписаться в поток документа inline. Однако, если он достигает точки, в которой ей требуется wrap, она опустится до новой строки, как если бы это был элемент block. Последующий текст будет продолжен сразу после элемента inline-block и продолжит обертывание как обычно. Это может привести к некоторым странным ситуациям.
Вот пример, чтобы показать, что я имею в виду. Чтобы увидеть это в действии, этот фрагмент cssdesk.
В вашем примере вы устанавливали псевдоэлемент :after равным display: inline-block - это означало, что, когда это происходило, чтобы пройти мимо самой правой границы отображения упаковки, оно действовало подобно голубому тексту в примере - и завернутый, как блок. Когда вы вместо этого изменяете элемент :after на display: inline, он заставляет его действовать так же, как любой другой текст, и без пробела между ним и предыдущими буквами слово-wrap действует так, как вы этого хотели.
Надеюсь, это поможет!
Примечание: Другое, что изменилось между вашим оригинальным fiddle и обновленный - это удаление white-space вокруг текста.
В первом скрипте ваш HTML выглядит так:
<div class="container2">
foo bar
</div>
Пока браузер не отображает пробелы до и после текста, он содержит пробелы, и когда элемент :after отображается, это происходит, как если бы это происходило:
<div class="container2"> foo bar :after</div>
Браузер сжимает несколько пространств в одном пространстве, но все же помещает пробел между словом "bar" и элементом :after. Подобно пробелу между любыми другими словами, это приведет к тому, что обертка произойдет после "bar", но до :after с определенной шириной.
Во второй скрипке вы используете:
<div class="container-wide">foo bar</div>
<div class="container-narrow">foo bar</div>
В этом случае, поскольку нет пробелов, заканчивающих строки "foo bar", браузер отображает элемент :after, отображаемый сразу же после конца строки содержимого. Как будто это происходит:
<div class="container-narrow">foo bar:after</div>
Без перерывов inline -обеспеченный текст означает отсутствие разрыва.
Для примера, демонстрирующего это, см. это обновление в jsFiddle.
Вы можете использовать отрицательный запас для ширины значка и преобразования css. Вот скрипка, как это сделать:
.container {
width: 50px;
}
.icon-circle {
background:black;
height:10px;
width:10px;
display: inline-block;
margin-left:5px;
}
.ANSWER{
display:block;
padding-right:15px; /* width of the icon */
}
.ANSWER .icon-circle{
margin-left:-10px;
transform:translate(15px);
} <h4>What we want</h4>
<div class="this-is-how-it-should-wrap">
foo bar<i class="icon-circle"></i>
</div>
<div style="margin-top:25px"></div>
<h4>What happenned</h4>
<div class="container NORMAL">
foo bar<i class="icon-circle"></i>
</div>
<div style="margin-top:25px"></div>
<h3>The answer</h3>
<div class="container ANSWER">
foo bar<i class="icon-circle"></i>
</div>Для тех, кто пытается сделать это без указания постоянного/статического значка в CSS, а скорее изменяющегося значка в HTML, я нашел интересный способ.
HTML:
<h3>
Long String Of Text
<a class="anchor" href="">
<i class="fas fa-link"></i>
</a>
</h3>
CSS:
.anchor {
white-space: nowrap
}
.anchor:before {
content: '';
}
Если вы не используете значок Font Awesome в качестве ссылки, вы можете просто заменить <a> выше на <span>.
Это похоже на работу в Chrome и Firefox. Я считаю, что причина, по которой это работает, описана здесь. Я думаю, что :before " :before " прикрепляет его к предыдущему слову...