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

У меня есть этот 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>

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

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 { ...

http://jsfiddle.net/52dkR/

трюк также в том, чтобы сделать этот класс inline-block

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

http://jsfiddle.net/atcJJ/

Добавить 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есть высота строки.

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

У меня была такая же проблема. Мне не очень понравилась идея добавления сильных тегов или тегов 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/

При использовании шрифта значка: использование юникода «неразрывного пробела» \00a0вместе с содержимым псевдоэлемента (в данном случае глифом Font Awesome).

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

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

line-height: 0;Часть держит линии от подергивания , когда последний «слово + значок» обруч.

Пример CodePen

Убедитесь, что вы завершили тег перед

<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; 
}

http://jsfiddle.net/my97k7b1/

Я пытался сделать это с помощью кнопки ссылки и добился наибольшего успеха, добавив отступы справа от элемента, как предложил @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.

Проблема возникает, когда в конце текста элемента есть пробел, поэтому значок рассматривается как другое слово. Мое решение - удалить пустое пространство с помощью javascript и поместить его за пределы элемента. Кроме того, таким образом мы избегаем text-decoration:underlineстилизации белого пространства, которое может быть в конце ссылки:

$(document).ready(function () {
  $("a[href$=\".pdf\"]").each(function () {
    var endspace = /\s$/;
    if (endspace.test($(this).html())) {
      var linktx = $(this).html().replace(/\s*$/, "");
      $(this).html(linktx);
      $(this).after(" ");
    }
  });
});

В css я добавляю неразрывный пробел \00A0перед значком, чтобы отделить его от текста и масштабировать в соответствии с размером шрифта. В некоторых случаях использование узкого непрерывного пространства \202Fдает лучший визуальный эффект:

a[href$=".pdf"]:after {
  content: "\00A0\f1c1";
  font-family: "Font Awesome 5 Pro";
}

https://jsfiddle.net/poselab/910bw7zt/8/

С моей конкретной настройкой единственным рабочим решением было использовать относительную позицию и поместить мой элемент значка в диапазон с абсолютной позицией. Вот так:

h2 a {
            position: relative;
            width: auto;
}
h2 a span {
            position: absolute;
            right: -30px;
            bottom: 0;
 }

<h2>
    <a href="#">
            The arrow won't drop to the next line as an orphan, even if the text is long and responsive
         <span>&#8594;</span>
    </a>
</h2>