텍스트를 CSS로 대체하려면 어떻게 해야 합니까?
다음과 같은 방법으로 텍스트를 CSS로 대체하려면 어떻게 해야 합니까?
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
(으) 대신에img[src*="IKON.img"]할 수 해야 합니다.), 대텍스대수체있것사을합야니다용해는신를할트▁),▁instead합니다.
사용해야 합니다.[ ]그것을 작동시키기 위해.
<div class="pvw-title">Facts</div>
"Facts"를 대체해야 합니다.
'아면팩 '트로 '니할 '포수 '도장 '있습 '니다 '▁a▁' '로트 '팩s 'fact' '로 감쌀 도 있어요.<span>다음과 같이:
.pvw-title span {
display: none;
}
.pvw-title:after {
content: 'whatever it is you want to add';
}<div class="pvw-title"><span>Facts</span></div>필수:이것은 해킹입니다: CSS는 이것을 하기에 적합한 장소가 아니지만, 어떤 상황에서는 - 예를 들어, CSS로만 사용자 지정할 수 있는 iframe에 타사 라이브러리가 있습니다 - 이런 종류의 해킹이 유일한 선택입니다.
당신은 CSS를 통해 텍스트를 대체할 수 있습니다.CSS를 사용하여 '안녕하세요'라는 단어가 있는 녹색 버튼을 '안녕히 계세요'라는 단어가 있는 빨간색 버튼으로 대체합니다.
이전:
이후:
라이브 데모는 http://jsfiddle.net/ZBj2m/274/ 를 참조하십시오.
녹색 버튼은 다음과 같습니다.
<button>Hello</button>
button {
background-color: green;
color: black;
padding: 5px;
}
이제 원래 요소를 숨기지만 나중에 다른 블록 요소를 추가합니다.
button {
visibility: hidden;
}
button:after {
content:'goodbye';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 2px;
}
참고:
- 기본적으로 '다음' 요소가 인라인인 경우 이를 블록 요소로 명시적으로 표시해야 합니다.
- 우리는 유사 요소의 위치를 조정하여 원래 요소를 보상해야 합니다.
- , 를 숨 기 표 요 해 야 시 니 다 유 사 여 사 하 용 을 음 고 ▁using
visibility: 모display: none원래 요소에서 작동하지 않습니다.
유사 요소를 사용하여 내용을 삽입할 수 있는 경우 다음 작업을 수행할 수 있습니다.원래 요소에 대한 지식을 가정하지 않으며 추가 마크업이 필요하지 않습니다.
.element {
text-indent: -9999px;
line-height: 0; /* Collapse the original line */
}
.element::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
마이크 맥카나의 대답에 따르면, 이것은 저에게 효과가 있었습니다.
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}<button>original</button>절대적으로 위치한 요소는 흐름에서 제거되므로 다른 요소를 배치할 때 공간을 차지하지 않습니다.
이것은 간단하고, 짧고, 효과적입니다.추가 HTML이 필요하지 않습니다.
.pvw-title { color: transparent; }
.pvw-title:after {
content: "New Text To Replace Old";
color: black; /* set color to original text color */
margin-left: -30px;
/* margin-left equals length of text we're replacing */
}
나는 우커머스 빵 부스러기를 위해 집이 아닌 링크 텍스트를 교체하기 위해 이것을 해야 했습니다.
Sass/Less
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
&:after {
content: "Store";
color: grey;
margin-left: -30px;
}
}
CSS
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
}
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
content: "Store";
color: @child-color-grey;
margin-left: -30px;
}
이후에 사용하고 원본 콘텐츠를 숨기려면 다음 해킹을 사용할 수 있습니다.
.pvw-title {
font-size: 0;
}
.pvw-title:after {
font-size: 1rem;
content: 'I am a totally different piece of text!';
}<div class="pvw-title">Facts</div> 정font-size.0으로 설정하면 뷰포트에서 실제 요소를 제거하지 않고 텍스트가 사라집니다. 그므로러,,:after선택기가 작동하며 모든 브라우저에 표시되어야 합니다.
당신은 할 수 없어요, 음, 할 수 있어요.
.pvw-title:after {
content: "Test";
}
요소의 현재 내용 뒤에 내용을 삽입합니다.실제로 그것을 대체하지는 않지만, 빈 div에 대해 선택할 수 있고, CSS를 사용하여 모든 콘텐츠를 추가할 수 있습니다.
하지만 어느 정도는 할 수 있지만, 그렇게 해서는 안 됩니다.실제 내용은 문서에 넣어야 합니다.내용 속성은 주로 따옴표로 묶어야 하는 텍스트 주위의 따옴표와 같은 작은 마크업용입니다.
사용해 보십시오.:before그리고.:after하나는 HTML이 렌더링된 후 텍스트를 삽입하고 다른 하나는 HTML이 렌더링되기 전에 삽입합니다.텍스트를 바꾸려면 단추 내용을 비워 두십시오.
이 예에서는 화면 너비 크기에 따라 단추 텍스트를 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button:before {
content: 'small screen';
}
@media screen and (min-width: 480px) {
button:before {
content: 'big screen';
}
}
</style>
<body>
<button type="button">xxx</button>
<button type="button"></button>
</body>
단추 텍스트:
와 함께
:before큰 화면 xxxxx
대형 스크린
와 함께
:afterxxx큰 화면
대형 스크린
내가 찾은 가장 간단한 방법은 원소를 만드는 것입니다.font-size: 0px그런 다음 만들 때 임의의 글꼴 크기로 덮어씁니다.:after예입니다.아래의 예:
.pvw-title {
font-size:0px;
}
.pvw-title:after {
content: "Hello";
font-size:15px !important;
}
나는 그것을 설정하는 것이 더 낫습니다.font-size: 0 요소의, 부요소의고그리, 외고리.font-size의 시대의:after내가 필요한 것은 무엇이든 선택할 수 있습니다.
다른 텍스트나 이미지를 표시하려면 태그를 비워두고 여러 데이터 속성에 내용을 기록합니다.<span data-text1="Hello" data-text2="Bye"></span> 클래스 중 합니다.:before {content: attr(data-text1)}
이제 그들 사이를 전환할 수 있는 여러 가지 방법이 있습니다.저는 내비게이션 이름을 아이콘으로 변경하기 위해 응답형 디자인 접근 방식을 위해 미디어 쿼리와 함께 사용했습니다.
그것은 질문에 완벽하게 답하지는 못할지도 모르지만, 그것은 나의 요구와 아마도 다른 사람들도 만족시켰습니다.
유사 요소 및 CSS 가시성을 사용한 텍스트 대체
HTML
<p class="replaced">Original Text</p>
CSS
.replaced {
visibility: hidden;
position: relative;
}
.replaced:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original.";
}
이것은 인라인 텍스트로 작동했습니다.Firefox, Safari, Chrome 및 Opera에서 테스트되었습니다.
<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>
span {
visibility: hidden;
word-spacing: -999px;
letter-spacing: -999px;
}
span:after {
content: "goodbye";
visibility: visible;
word-spacing: normal;
letter-spacing: normal;
}
다음 방법을 사용해 보십시오.
IDENTIFIER {
visibility: hidden;
position: relative;
}
IDENTIFIER::after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "NEW_CONTENT";
}
저는 다음과 같은 속임수를 씁니다.
.pvw-title {
text-indent: -999px;
}
.pvw-title:after {
text-indent: 0px;
float: left;
content: 'My New Content';
}
기본 클래스를 변경하는 것만으로 페이지의 국제화를 처리하는 데도 사용했습니다.
.translate-es .welcome {
text-indent: -999px;
}
.translate-es .welcome:after {
text-indent: 0px;
float: left;
content: '¡Bienvenidos!';
}
확인란은 '선택됨' 상태에 따라 예 또는 아니오를 표시하는 버튼으로 구현됩니다.따라서 코드를 작성할 필요 없이 CSS를 사용하여 텍스트를 대체하는 한 가지 방법을 보여줍니다.
POST 값을 반환(또는 반환하지 않음)하는 경우에는 여전히 확인란처럼 작동하지만 디스플레이 관점에서는 토글 버튼처럼 보입니다.
색상이 마음에 들지 않을 수도 있습니다. 요점을 설명하기 위해 있을 뿐입니다.
HTML은 다음과 같습니다.
<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>
...그리고 CSS는 다음과 같습니다.
/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
display:none;
}
/* --------------------------------- */
/* Set the associated label <span> */
/* the way you want it to look. */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
display:inline-block;
width:80px;
height:30px;
text-align:center;
vertical-align:middle;
color:#800000;
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the */
/* the label <span> is "No" */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
content:"No";
}
/* --------------------------------- */
/* When the box is checked the */
/* content after the label <span> */
/* is "Yes" (which replaces any */
/* existing content). */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the */
/* label <span> looks like this */
/* (which replaces any existing) */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
color:green;
background-color:#C8C8C8;
}
파이어폭스에서만 해봤는데, 표준 CSS라서 다른 곳에서 작동할 것 같습니다.
유사 요소를 사용하는 이 방법은 원래 요소에 대한 지식이 필요하지 않으며 추가 마크업도 필요하지 않습니다.
#someElement{
color: transparent; /* You may need to change this color */
position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
content: "New text";
color: initial;
position: absolute;
top: 0;
left: 0;
}
저는 이런 해결책을 찾았습니다. "Dark"라는 단어는 더 작은 화면 너비에서 "D"로 단축될 수 있습니다.기본적으로 원래 내용의 글꼴 크기를 0으로 만들고 단축된 형태를 유사 요소로 사용합니다.
이 예에서는 변경 사항이 대신 호버에 적용됩니다.
span {
font-size: 12px;
}
span:after {
display: none;
font-size: 12px;
content: 'D';
color: red;
}
span:hover {
font-size: 0px;
}
span:hover:after {
display: inline;
}<span>Dark</span>링크 텍스트를 대체해야 하는 문제가 있었는데, 자바스크립트를 사용할 수 없었고, XML에서 아래로 컴파일되어 하이퍼링크 텍스트를 직접 변경할 수도 없었고, 의사 요소를 사용할 수도 없었고, 시도해보니 작동하지 않는 것 같았습니다.
기본적으로 원하는 텍스트를 스판에 넣고 그 밑에 앵커태그를 넣고 둘 다 디브로 감쌌습니다.저는 기본적으로 CSS를 통해 앵커 태그를 위로 이동시킨 다음 글꼴을 투명하게 만들었습니다.이제 여러분이 스팬 위를 맴돌 때, 스팬은 연결처럼 "작용"합니다.정말로 엉터리 방법이지만, 이렇게 하면 다른 텍스트로 링크를 만들 수 있습니다.
이것이 제가 이 문제를 어떻게 해결했는지에 대한 수수께끼입니다.
내 HTML
<div class="field">
<span>This is your link text</span><br/>
<a href="//www.google.com" target="_blank">This is your actual link</a>
</div>
내 CSS
div.field a {
color: transparent;
position: absolute;
top:1%;
}
div.field span {
display: inline-block;
}
CSS는 당신의 요구 사항에 따라 변경되어야 하지만, 이것은 당신이 요청하는 것을 수행하는 일반적인 방법입니다.
8년 후 Stylish 브라우저 확장을 사용하여 웹 사이트(내 것이 아닌)에서 무언가를 변경하려고 할 때도 같은 문제에 직면했습니다.그리고 이번에는 "inspect element"를 사용하여 소스 코드를 보고 작동하도록 만들었고 그것을 기반으로 CSS 코드를 만들었습니다.
이것이 바로 이전의 모습입니다.
<table>
<tbody>
<tr>
<td role="gridcell">
<span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
</td>
</tr>
</tbody>
</table>이것은 스타일을 수정하기 위해 사용한 HTML과 CSS의 동일한 부분입니다.
td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
width: 100px!important;
}<table>
<tbody>
<tr>
<td role="gridcell">
<span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
</td>
</tr>
</tbody>
</table>위의 코드를 실행하면 작동하는 것을 확인할 수 있습니다(Chrome에서 테스트됨).
이것이 바로 제가 이 질문을 던졌던 그 시절에 제가 원했던 것입니다.
저는 일종의 커뮤니티 블로그/Myspace 유사한 것을 사용하고 있었고 당신의 프로필을 스타일링할 때 당신이 가진 유일한 것은 그들의 CSS 편집기였습니다. 그래서 저는 그 스타일에 따라 그것을 선택하고 싶었습니다.
여기서 답을 찾았습니다.
다른 모든 답변에서 나타나는 것과 달리 태그의 내용을 이미지로 바꾸기 위해 유사 요소를 사용할 필요는 없습니다.
<div class="pvw-title">Facts</div>
div.pvw-title { /* No :after or :before required */
content: url("your URL here");
}
많은 사람들이 말했듯이 이것은 해킹입니다.하지만, 저는 더 많은 최신 해킹을 추가하고 싶습니다. 이 해킹은flexbox그리고.rem를 들어 예를 들어.
- 이 텍스트를 수동으로 변경하지 않으려는 이유는 다음과 같습니다.
flexbox - 은 지않하는경우려를 사용하고 않을 입니다.
padding및/는margin으로 을사하여명본문에로으시적을 사용합니다.px장치와 수 .
해결책은.flexbox 자으로완배게치록도하고되하벽동,하고▁makes록,rem픽셀에 대한 보다 표준화된(및 자동화된) 대안입니다.
아래 코드가 있고 스크린샷 형태로 출력되는 CodeSandbox(코드 샌드박스), 다음을 읽어보십시오.note코드 아래!
h1 {
background-color: green;
color: black;
text-align: center;
visibility: hidden;
}
h1:after {
background-color: silver;
color: yellow;
content: "This is my great text AFTER";
display: flex;
justify-content: center;
margin-top: -2.3rem;
visibility: visible;
}
h1:before {
color: blue;
content: "However, this is a longer text to show this example BEFORE";
display: flex;
justify-content: center;
margin-bottom: -2.3rem;
visibility: visible;
}
인 " " " " " " " " " " " " " " " " " " 이 할 수 있습니다.rem이것은 정당화되었습니다.h1큰 화면에서만 볼 수 있습니다. 단과 ,@media모바일 기기로 쉽게 확장할 수 있습니다.
예
<!DOCTYPE html>
<html>
<head>
<title>Devnote</title>
<style>
.replacedValue {
visibility: hidden;
position: relative;
}
.replacedValue:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "Devnote is developer answer solve. devnote.in";
}
</style>
</head>
<body>
<p class="replacedValue">Old Text Here</p>
</body>
</html>
산출량
Devnote is developer answer solve. devnote.in
이것은 속임수 없이는 정말로 가능하지 않습니다.다음은 텍스트를 텍스트 이미지로 대체하여 작동하는 방법입니다.
.pvw-title{
text-indent: -9999px;
background-image: url(text_image.png)
}
이러한 유형의 작업은 일반적으로 JavaScript로 수행됩니다.jQuery를 사용하여 수행할 수 있는 방법은 다음과 같습니다.
$('.pvw-title').text('new text');
이 작업을 수행하는 방법은 CSS 콘텐츠에 줄 높이를 추가하는 것입니다.이렇게 하면 숨겨진 블록 위에 블록이 표시되므로 변경된 텍스트가 숨겨지지 않습니다.
앞에 사용하는 예:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}
의 원래 설정의소 설정line-height그리고.font-size0px 다음 (으)로 합니다.:after사유요font-size)는 요소의 컨테이너 및 주변 요소의 간격/포맷/포맷을 흐트러뜨리지 않고 작동한 유일한 도구입니다.
#test {
font-size: 0px;
line-height: 0px;
}
#test:after {
font-size: 12px;
content: 'Good Bye';
}<span id="test">Hello</span>스테판 밥의 대답을 바탕으로 만들어졌습니다.
언급URL : https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css
'programing' 카테고리의 다른 글
| mariadb FROM_UNIXTIME 미래 시간 제한 (0) | 2023.07.29 |
|---|---|
| iPhone: 탐색 모음이 있는 모달 UITableView 컨트롤러 표시 (0) | 2023.07.29 |
| 인수를 위한 밑줄이 있는 파이썬의 람다? (0) | 2023.07.29 |
| PHP 오류:함수 이름은 문자열이어야 합니다. (0) | 2023.07.29 |
| 대소문자를 구분하지 않는 셸 스크립트의 문자열 비교 (0) | 2023.07.29 |