: after 요소가 다음 줄로 줄 바꿈되지 않도록 방지

: after 요소가 다음 줄로 줄 바꿈되지 않도록 방지

---

이 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라인의 높이입니다.

패딩으로 영역 크기를 조정합니다. 왼쪽이든 오른쪽이든 상관 없습니다. 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;
}

http://jsfiddle.net/atcJJ/36/

---

Please make sure you end the tag before

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

Try the below css. Instead of using "after" use "before" and float right.

ul li.completed a:before {
    background:transparent url(img1.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
    float:right;
}

Please check this: http://jsfiddle.net/supriti/atcJJ/7/

---

It is possible to do it without :after. The element with background should be 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/

---

I was attempting this with a link button and had the most success with adding padding to the right of the element as @Hugo Silva suggested, then setting the ::after to absolute position. This was a pretty simple solution and seemed to work across modern browsers.

.button {
  position: relative;
  color: #F00;
  font-size: 1.5rem;
  padding-right: 2.25rem;
}

.button::after {
  content: '>>';
  display: inline-block;
  padding-left: .75rem;
  position: absolute;
}

Here's a JS Fiddle.

---

If using an icon font: Using the "non-breaking space" unicode \00a0 along with the pseudo-element content (in this case a Font Awesome glyph).

추가 마크 업이나 특수 형식 또는 클래스 이름없이 작동합니다.

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

이 line-height: 0;부분은 마지막 '단어 + 아이콘'이 줄 바꿈 될 때 줄이 뒤틀리는 것을 방지합니다.

CodePen 예

참고 URL : https://stackoverflow.com/questions/16100956/prevent-after-element-from-wrapping-to-next-line