텍스트를 CSS로 바꾸려면 어떻게해야합니까?

321

다음과 같은 방법을 사용하여 텍스트를 CSS로 바꾸려면 어떻게해야합니까?

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

대신에 ( img[src*="IKON.img"] ) 대신 텍스트를 대신 할 수있는 것을 사용해야합니다.

[ ]작동 시키려면 사용해야 합니다.

<div class="pvw-title">Facts</div>

" Facts " 를 교체해야합니다 .

css text replace

— 모 키타
소스

솔직히 이것을 위해 자바 스크립트를 사용하는 것이 가장 좋습니다.

— Sir

Javascript를 사용하려면 DOM을로드해야하므로 FOUC가 있습니다. HTML 서버 측을 생성 하지 않고도 FOUC를 피하면서 텍스트를 쿼리 문자열에서 추출한 내용으로 바꾸고 싶습니다 (따라서 HTML을 적극적으로 캐시하고 CDN에서 제공 할 수있게합니다).

— nemequ

32

문제는 CSS로 어떻게 하는가입니다. 내가 하고 단지 나를 내가 도착 이유 CSS, 변경할 수있는 CMS를 사용하여 이 대답에 대한 인터넷 검색을하는 도중, 그리고 다른 하나를. 그렇기 때문에 우리는 왜 질문자의 상황이 다른지 묻는 대신 질문에 대답했습니다.

— felwithe

291

또는 <span>다음과 같이 'Facts'를 a 로 감쌀 수 있습니다.

<div class="pvw-title"><span>Facts</span></div>

그런 다음 사용하십시오.

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

— 매튜 카치아
소스

52

좋지만 CSS가 아닌 HTML로 변경되었습니다.

— mikemaccana

22

때로는 유일한 옵션

— locrizak

4

스팬 {표시 : 없음; } 의사 요소도 숨겨야합니다. 가시성을 사용해야합니다. 대신 숨겨

— 짐

2

디스플레이 : 없음; 그리고 가시성 : 숨겨진; 둘 다 의사 요소를 숨기십시오

— Facundo Colombier

10

@Mathew는 범위를 숨기고 있지만 의사 요소를 div에 추가하므로 의사 요소를 숨기지 않아야합니다 (가시성 또는 표시 속성을 사용하여)

— dewtea

249

의무 : 이것은 해킹입니다 : CSS는이 작업을 수행하기에 적합한 장소는 아니지만 일부 상황에서-예를 들어 CSS로만 사용자 정의 할 수있는 iframe에 타사 라이브러리가 있습니다-이러한 종류의 해킹은 유일한 옵션입니다 .

CSS를 통해 텍스트를 바꿀 수 있습니다. CSS를 사용하여 녹색 버튼을 'hello'로 바꾸고 'goodbye'라고 표시된 빨간 버튼으로 바꿉니다.

전에:

후:

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

노트 :

우리는 이것을 명시 적으로 블록 요소로 표시해야합니다 .'after '요소는 기본적으로 인라인입니다.
의사 요소의 위치를 조정하여 원래 요소를 보정해야합니다.
원래 요소를 숨기고를 사용하여 의사 요소를 표시해야합니다 visibility. display: none원래 요소에 대한 참고 사항 이 작동하지 않습니다.

— 미케 마카 나
소스

2

이것은 10에서 작동하지 않습니다. 수정하려면 어떻게해야합니까?

— Solmead

49

display: none;::after누군가“호기심이 생겼을 때를 대비하여“이 요소 내부에 있지만 결국에는”을 의미 하기 때문에 작동하지 않습니다 .

— Ry-

4

불행히도 "수정 된"버튼은 더 이상 버튼처럼 작동하지 않습니다. 버튼에는 적용되지 않는 좋은 예입니다.

— xryl669

1

디스플레이 : 없음; 그리고 가시성 : 숨겨진; 둘 다 의사 요소를 숨기십시오

— Facundo Colombier

어떻게하면 요소를 대체하지만 텍스트는 모두 대문자이며 소문자로 변경할 수 없습니까?

— Jpaji Rajnish 17

159

의사 요소를 사용하고 내용을 삽입하게하려면 다음을 수행하십시오. 원래 요소에 대한 지식이 없으며 추가 마크 업이 필요하지 않습니다.

.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 */
}

JSFiddle 예제

— 제임스 반 다이크
소스

1

이 답변은 <th>요소 내의 텍스트 노드와 같은 다른 많은 답변이없는 곳에서 작동합니다 .

— Chris Kerekes

5

이것은 잘 작동합니다. 내 경우, line-height: 0그리고 color: transparent주요 요소와 의사에 그 값을 재설정하는 작업 (아니 손보는 할 text-indent)

— dontGoPlastic

1

line-height: normal대신 해서는 안 initial됩니까?

— Benjamin

1

텍스트 들여 쓰기를 사용하는 이유는 원본 텍스트가 더 길면 요소가 새 텍스트의 크기로 줄어들지 않고 기존 텍스트의 크기를 유지하기 때문입니다 (원하는 것으로 가정)

— Chris Janssen

텍스트 들여 쓰기 : -9999px; IE에서 작동합니다. 가시성 : 숨겨진; IE에서는 메소드가 작동하지 않습니다.

— Tom Stermitz

57

mikemaccana의 답변을 바탕으로 , 이것은 나를 위해 일했습니다.

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ 절대 위치

절대적으로 배치 된 요소는 흐름에서 제거되므로 다른 요소를 배치 할 때 공간을 차지하지 않습니다.

— 스티븐 페니
소스

2

나 에게이 대답은 같은 줄 내에서 텍스트 교체와 함께 작동하기 때문에 다른 HTML보다 우수했습니다. 즉, HTML과 CSS의 특정 조합에 대해 텍스트에서 줄 바꿈을 강요하지 않습니다.

— pgr

30

이것은 간단하고 짧으며 효과적입니다. 추가 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 */
    }

WooCommerce를 위해 집 이외의 링크 텍스트를 바꾸려면이 작업을 수행해야했습니다. 빵 부스러기를

사스 / 이하

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

— 호크 아이 126
소스

22

당신은 할 수 없습니다.

.pvw-title:after {
  content: "Test";
}

요소의 현재 내용 뒤에 내용이 삽입됩니다 . 실제로 그것을 대체하지는 않지만 빈 div를 선택하고 CSS를 사용하여 모든 내용을 추가 할 수 있습니다.

그러나 당신이 어느 정도 할 수는 있지만 그렇게해서는 안됩니다. 실제 내용은 문서에 넣어야합니다. content 속성은 주로 따옴표로 묶어야하는 텍스트 주위의 따옴표와 같은 작은 태그를위한 것입니다.

— 골 레츠 트롤
소스

텍스트를 해당 방법으로 대체하는 코드를 사용했다고 확신합니다. '<div class = "pvw-title"> 사실 </ div> <div class = "pvw-title"> 사실 </ div> '사용할 수 없습니다 : 나중에 같은 이름을 가진 div 클래스가 두 개 이상 있습니다. (

— MokiTa

브라우저와 얼마나 호환이됩니까? 그리고 나는 자바 스크립트가 이러한 종류의 유연성을 위해 장기적으로 더 나은 선택이 될 것이라고 생각합니다.

— Sir

최신 브라우저가이를 지원합니다. 이전 IE 버전에 대해서는 잘 모르겠지만 quirksmode.com에서 찾을 수 있습니다. -edit- 그것은 할 수 있습니다 : quirksmode.org/css/user-interface/content.html

— GolezTrol

15

사용 시도 :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

큰 screenxxx

큰 화면
와 :after

xxx 큰 화면

큰 화면

— 살아있는 사랑
소스

11

당신은 단지 다른 텍스트 나 이미지를 표시 할 경우, 태그가 비어 여러 데이터 속성의 콘텐츠 쓰기 계속 그런를 <span data-text1="Hello" data-text2="Bye"></span>. 의사 클래스 중 하나를 사용하여 표시:before {content: attr(data-text1)}

이제 여러 가지 방법으로 전환 할 수 있습니다. 내 탐색 이름을 아이콘으로 변경하기 위해 반응 형 디자인 방식을 위해 미디어 쿼리와 함께 사용했습니다.

jsfiddle 데모 및 예제

_{그것은 질문에 완벽하게 대답하지 못할 수도 있지만 내 요구와 다른 사람들도 만족시킬 것입니다.}

— 로벤 데비 엔
소스

10

나는 설정을 더 행운이 있었다 font-size: 0외부 요소를, 그리고 font-size의 :after선택 내가 필요로 무엇이든합니다.

— 제롬
소스

1

이것은 잘 작동합니다. 여기 데모가 있습니다.

— Arthur

9

이것은 인라인 텍스트로 저에게 효과적이었습니다. 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;
}

— 노엘 윌리엄스
소스

2

(11)를 통해 적어도 IE 9 나에게하지 작업으로 인해 그것이 무시합니까 "가시성 : 볼"에 : 요소 다음 stackoverflow.com/questions/17530947/...

— thenickdude

8

이 트릭을 사용합니다.

.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!';
}

— 피트 OK
소스

3

스크린 리더가있는 사용자에게는 문제가됩니다. 요소의 disaply / visibility를 변경하지 않고 아리아 힌트를 제공하지 않아도 화면 판독기가 "보이지 않는"텍스트를 읽을 수 있습니다.

— 눈에 띄는 컴파일러

8

의사 요소 및 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.";
}

— 아산 Aftab
소스

3

의사 요소를 사용하는이 방법은 원래 요소에 대한 지식이 필요하지 않으며 추가 마크 업이 필요하지 않습니다.

#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;
}

— 빈
소스

2

'체크 된'상태에 따라 예 또는 아니오를 표시하는 버튼으로 확인란을 구현합니다. 따라서 코드를 작성하지 않고도 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;
}

Firefox에서만 시도했지만 표준 CSS이므로 다른 곳에서 작동해야합니다.

— 스티브 더글라스
소스

2

다른 모든 답변에서 볼 수있는 것과 달리 태그의 내용을 이미지로 바꾸기 위해 의사 요소를 사용할 필요가 없습니다.

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

— 에스테 카
소스

2

CSS2 content부터 :beforeand 에만 적용됩니다 :after. CSS3은이를 모든 것으로 확장하지만 생성 된 컨텐츠 모듈은 여전히 초안 상태이므로 모든 사용은 브라우저에 따라 다를 가능성 이 높습니다.

— mrec

1

"balise" 는 무엇입니까 ? 안 " 1. (유럽 열차 제어 시스템)을 railw의 레일 사이에 전자 표지 또는 트랜스 폰더 " 나는 가정. ( 여기에 의견이 아닌 질문 을 편집하여 응답 하십시오.)

— Peter Mortensen

1

트릭 없이는 실제로 불가능합니다. 다음은 텍스트를 텍스트 이미지로 바꾸어 작동하는 방법입니다.

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

이러한 유형의 작업은 일반적으로 JavaScript로 수행됩니다. 다음은 jQuery로 수행 할 수있는 방법입니다.

$('.pvw-title').text('new text');

— 나단 마누 소스
소스

3

Javascript도 사용할 수 없습니다 : /

— MokiTa

1

이것이 내가 생각할 수있는 유일한 방법입니다 : .pvw-title span [style * = "color : # 000, font-size : 14px;"] {visible : hidden; } .pvw-title span [style * = "color : # 000; font-size : 14px;"] : after {가시성 : 보이는; 색상 : # 000; 글꼴 크기 : 14px; 내용 : "테스트"; } 그러나 둘 다 같은 스타일을 사용하기 때문에 할 수 없습니다 .. : /

— MokiTa

왜 색상 / 글꼴을 기준으로 선택 하시겠습니까?

— Nathan Manousos

전체 스타일을 기준으로 선택하므로 둘 다 동일한 "div"이름을 가지기 때문에 특정 제목 만 편집 할 수 있습니다.

— MokiTa

1

링크 텍스트를 바꿔야하는 문제가 있었지만 JavaScript를 사용할 수 없었거나 하이퍼 링크의 텍스트를 XML에서 컴파일하여 직접 변경할 수 없었습니다. 또한 의사 요소를 사용할 수 없거나 시도했을 때 작동하지 않는 것 같습니다.

기본적으로 원하는 텍스트를 범위에 넣고 앵커 태그를 그 아래에 놓고 둘 다 div로 감쌌습니다. 기본적으로 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는 요구 사항에 따라 변경해야하지만 이것은 요청하는 것을 수행하는 일반적인 방법입니다.

— 전능하신 이유
소스

1

@Almight이 솔루션이 마크 업을 수정해야하기 때문에 다운 투표 된 것으로 의심되고 OP가 마크 업을 수정할 수 있는지 의심되면 텍스트를 직접 변경했을 것입니다. 다시 말해, OP에는 CSS 전용 솔루션이 필요했습니다

— dannie.f

1

작은 화면 너비에서 "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>

스 니펫 확장

— 스테판 밥
소스

1

8 년이 지난 지금, 스타일리쉬 를 사용하려고 할 때도 같은 도전에 직면했습니다 브라우저 확장 프로그램을 웹 사이트 (내가 아닌)에서 무언가를 변경 . 이번에는 "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 편집기 였기 때문에 스타일을 기반으로 선택하고 싶었습니다.}

나는 여기서 답을 찾았습니다.

— 모 키타
소스

0

이 작업을 수행하는 방법은 CSS 내용에 줄 높이를 추가하는 것입니다. 이렇게하면 숨겨진 블록 위에 블록이 표시되므로 변경된 텍스트를 숨기지 않습니다.

이전 에 사용한 예제 :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

— 탈 탈몬
소스

0

글쎄, 많은 사람들이 말했듯이 이것은 핵입니다. 그러나, 나는의 장점 소요 더 최신의 해킹, 추가 할 flexbox하고 rem, 즉

이 텍스트를 수동으로 변경하여 변경하지 않으려면 다음과 같은 이점을 활용하십시오. flexbox
을 사용 하여 텍스트를 명시 적으로 사용 padding하고 싶지 않거나 다른 장치 및 브라우저의 화면 크기가 다르면 출력이 다를 수 있습니다.marginpx

여기에 해결책이 있습니다. 즉, flexbox자동으로 완벽하게 배치되고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이를 통해 모바일 장치로 쉽게 확장 할 수 있습니다.

— 다니엘 다니엘 케키
소스