이 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’을 추가하지 않고도이 작업을 수행 할 수 있습니까?
답변
대신 마지막 단어에 이미지를 추가 할 수 있습니다. 그것은 함께 깨질 것입니다.
단어에 수업 추가
<strong class="test">word</strong>
과 .test:after { ...
비결은 또한 그 클래스를 inline-block
밑줄을 유지하려면 이것을 참조하십시오.
더하다 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;
}
답변
아이콘 글꼴을 사용하는 경우 : \00a0의사 요소 콘텐츠 (이 경우 Font Awesome 글리프)와 함께 “분할되지 않는 공백”유니 코드 를 사용합니다.
추가 마크 업이나 특수 형식 또는 클래스 이름없이 작동합니다.
a[href^='http']::after {
content: '\00a0\f14c';
font-family: 'Font Awesome 5 Pro', sans-serif;
line-height: 0;
}
이 line-height: 0;부분은 마지막 ‘단어 + 아이콘’이 줄 바꿈 될 때 줄이 꼬이지 않도록합니다.
답변
태그를 종료했는지 확인하세요.
<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를 시도하십시오. “after”를 사용하는 대신 “before”를 사용하고 오른쪽으로 부동합니다.
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;
}
