Як можна замінити текст на CSS?

Як можна замінити текст на CSS, використовуючи такий метод:

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

Замість ( img[src*="IKON.img"] ) мені потрібно використовувати щось, що може замінити текст.

Мені доводиться використовувати, [ ]щоб він працював.

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

Мені потрібно замінити " Факти ".

А може бути, ви можете обернути "Факти" навколо а <span>так:

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

Потім використовуйте:

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

Обов’язково : це хак: CSS - це не правильне місце для цього, але в деяких ситуаціях - наприклад, у вас є бібліотека третьої сторони в iframe, який може бути налаштований лише CSS - такий вид зламу є єдиним варіантом .

Ви можете замінити текст за допомогою 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;
}

Примітка:

• Нам явно потрібно позначати це як елемент блоку, елементи "після" вбудовані за замовчуванням
• Нам потрібно компенсувати вихідний елемент, регулюючи положення псевдоелемента.
• Ми повинні приховати оригінальний елемент і відобразити псевдоелемент за допомогою 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 */
}

Приклад JSFiddle

Виходячи з відповіді mikemaccana , це працювало для мене

button {
  position: absolute;
  visibility: hidden;
}

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

§ Абсолютне позиціонування

елемент, який розташований абсолютно, виймається з потоку і, таким чином, не займає місця при розміщенні інших елементів.

Це просто, коротко та ефективно. Додатковий 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;
}

Ти не можеш, ну, можеш.

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

Текст кнопки:

1. З :before

   великий екранxxx

   великий екран

2. З :after

   xxxbig екран

   великий екран

Якщо ви просто хочете показувати різні тексти чи зображення, тримайте тег порожнім і записуйте свій вміст у декілька подібних атрибутів даних<span data-text1="Hello" data-text2="Bye"></span> . Покажіть їх одним із псевдокласів:before {content: attr(data-text1)}

Тепер у вас є маса різних способів перемикання між ними. Я використовував їх у поєднанні з медіа-запитами для чуйного дизайнерського підходу, щоб змінити назви моєї навігації на іконки.

демонстрація jsfiddle та приклади

_{Це може не чудово відповісти на питання, але воно задовольнило мої потреби, а може, і інших.}

У мене був краще настройки везіння font-size: 0зовнішнього елемента, а font-sizeна :afterселекторній все , що мені було потрібно.

Це працювало для мене з вбудованим текстом. Він був протестований у 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;
}

Я використовую цю хитрість:

.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

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

Використовуючи псевдоелемент, цей метод не вимагає знання оригінального елемента та не потребує додаткової розмітки.

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

Це реалізує прапорець як кнопку, яка показує або Так, ні Ні, залежно від стану "галочки". Таким чином, він демонструє один із способів заміни тексту за допомогою 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, тому він повинен працювати в іншому місці.

На відміну від того, що я бачу в кожній іншій відповіді, вам не потрібно використовувати псевдоелементи, щоб замінити вміст тегу на зображення

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

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

Це справді неможливо без хитрощів. Ось спосіб, який працює, замінивши текст на зображення тексту.

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

Цей тип речі зазвичай робиться за допомогою JavaScript. Ось як це можна зробити за допомогою jQuery:

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

У мене виникла проблема, коли мені довелося замінити текст посилання, але я не зміг використовувати JavaScript, а також не зміг безпосередньо змінити текст гіперпосилання, оскільки він був складений з 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 потрібно буде змінити, виходячи з ваших вимог, але це загальний спосіб робити те, що ви просите.

Я знайшов таке рішення, де слово "Темне" було б скорочено до просто "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>

Після восьми років я зіткнувся з тим же завданням, коли намагався використовувати Стильний розширення браузера щоб щось змінити на веб-сайті (не моє). І цього разу я змусив його працювати, переглянувши вихідний код за допомогою "перевірити елемент" та створив на основі цього 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, і саме тому я хотів обрати його на основі стилю.}

Тут я знайшов відповідь:

• Розширений селектор CSS - вибирайте на основі стилю

• Селектор CSS за атрибутом стилю inline

Спосіб зробити цю роботу - додати висоту рядка до вмісту CSS. Це зробить блок, який можна побачити над прихованим, таким чином, це не приховає змінений текст.

Приклад із використанням до :

.pvw-title span {
  display: none;
}

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

Ну, як багато хто казав, це хак. Однак я хотів би додати більш сучасний хак, який використовує перевагу flexboxі rem, тобто

• Ви не хочете вручну розміщувати цей текст, щоб його змінювали, саме тому ви хочете скористатися flexbox
• Ви не хочете використовувати paddingта / або marginвикористовувати текст, явно використовуючи px, що для різних розмірів екрана на різних пристроях та браузерах може давати різний вихід

Ось рішення, коротше кажучи, 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вами можна легко поширити це на мобільні пристрої.