이 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;
<span class="icon">각각의 마지막 단어로,이에 아이콘을 추가span
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>
width:26px;및 2px 0배경 위치가 이동 것 같은. jsfiddle.net/Bk38F/23
이것은 이전 답변과 약간 비슷하지만 그것을 구체화하고 완전히 설명하겠다고 생각했습니다.
즉시 설정으로 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에서 제대로 작동합니다. 그리고 아이콘은 텍스트 요소로 남아 있기 때문에 바인딩 후 직접 텍스트도 유지되므로 닫는 구두점도 줄 바꿈됩니다.
:after. 어떻게 작동하는지 :before아십니까?
나는 같은 문제를 겪고 있었다. 마지막 단어에 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;
}
나는 링크 버튼으로 이것을 시도했고 @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;
}
요소의 텍스트 끝에 공백이있을 때 문제가 발생하여 아이콘을 다른 단어로 간주합니다. 내 해결책은 자바 스크립트로 공백을 제거하고 요소 외부에 두는 것입니다. 또한 이렇게 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";
}
content: '\00A0'; 은 트릭이었습니다. <3
내 특정 설정에서 유일한 작업 솔루션은 상대 위치를 사용하고 절대 위치가있는 범위에 내 아이콘 요소를 배치하는 것입니다. 이렇게 :
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>→</span>
</a>
</h2>