запобігти: після перенесення елемента після наступного рядка

У мене є такий 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стає елементом, що не прив'язує текст. Ось чому він обгортається, і чому норап не має ефекту. Тож залиште в 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. А оскільки піктограма залишається текстовим елементом, навіть прямий текст після її прив’язки, тому будь-яка закриваюча пунктуація також обернеться.

У мене була та сама проблема. Мені не дуже сподобалась ідея додавання сильних тегів або тегів до останнього слова, тому я спробував просто додати піктограму як фонове зображення з деяким відступом вправо, замість того, щоб використовувати псевдоелементи: 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/

Якщо використовується шрифт значка: Використання Unicode "нерозривного простору" \00a0разом із вмістом псевдоелемента (в даному випадку гліфом Awesome Font).

Це працює без зайвої націнки чи спеціального форматування чи назв класів.

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>