Я просто хотел указать , почему изменение, которое @Unmocked предоставлено фактически работает, и оно имеет отношение к difference between display: inline and display: inline-block.
Чтобы объяснить, вот немного фона на разницу между block дисплей и inline дисплей.
Блок дисплея
block элементы, в общем, являются элементами, которые причиной макета. Они получают свою собственную ограничительную рамку и имеют возможность подталкивать другие элементы в некоторой степени, чтобы вписаться в пространство, доступное в области рендеринга браузера. Примеры block изделий включают: h1, p, ul и table. Обратите внимание, что каждый из этих элементов по умолчанию запускает новую строку, а также заканчивает свою собственную линию при закрытии. Другими словами, они вписываются в блок текста, создавая свой собственный раздел уровня абзаца.
Инлайн Показать
inline элементы, в общем, отображаются в линию с текстом. Другими словами, они предназначены для отображения с влиния текста. Примеры включают i, b или span. Обратите внимание, что каждый из этих элементов по умолчанию продолжает поток окружающего его текста, не заставляя новую строку перед или после себя.
Введите Полпути случай ...
Инлайн-Block Display
inline-block представляет собой гибрид из двух предыдущих. По существу, элемент inline-blockзапускает везде, где его предшествующий текст не работает, и пытается вписаться в поток документа inline. Однако, если он достигнет точки, где ему необходимо wrap, он упадет до новой строки, как если бы это был элемент block. Последующий текст будет продолжен сразу после элемента inline-block и продолжит обертывание как обычно. Это может привести к некоторым странным ситуациям.
Вот пример, чтобы показать, что я имею в виду. Чтобы увидеть это в действии, ознакомьтесь с this cssdesk snippet.
В вашем примере, вы были настройки :after псевдо-элемент будет display: inline-block - это означало, что, когда это случилось продлить мимо самой правой границы дисплея оберточной, он действовал как свето- синий текст в примере - и завернут, как блок. Когда вы вместо этого меняете элемент на display: inline, он заставляет его действовать так же, как и любой другой текст - и без пробелов между ним и предыдущими буквами слово-обертка действует так, как вы этого хотели.
Надеюсь, это поможет!
Примечание: Другая вещь, которая изменяется между исходной fiddle и updated one является устранение 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 -rendered текста не означает, без перерыва.
Для примера, демонстрирующего это, см. this update в вашем jsFiddle.
Я не могу найти способ сделать это только в CSS, поскольку последнее слово нуждается в ссылке на значок. Тем не менее, это замечательно легко, если вы хотите использовать небольшую функцию JS! – nickhar
@nickhar У меня такая же проблема, но я не могу использовать ширину, которую использовал OP для контейнера. если бы вы могли помочь мне с этой небольшой функцией JS, было бы полезно. – Lucian