Soru Metni CSS ile nasıl değiştirebilirim?


Böyle bir yöntem kullanarak css ile metni nasıl değiştirebilirim:

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

Yerine ( img[src*="IKON.img"]  ), Yerine metni değiştirebilecek bir şey kullanmalıyım.

kullanmak zorundayım [  ] işe almak için.

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

"Gerçekler" i değiştirmem gerek.


211
2017-10-25 21:58


Menşei


Dürüst olmak gerekirse, bunun için javascript kullanmak en iyi olabilir. - Sir
Javascript kullanmak DOM'nin yüklenmesini gerektirir, bu yüzden FOUC vardır. Bir FOUC'den kaçınarak, sorgu dizesinden çıkarılan içerikle metni değiştirmek için bunu yapmak istiyorum olmadan HTML sunucu tarafı oluşturulmak zorundadır (böylece HTML'nin agresif bir şekilde önbelleğe alınmasına ve bir CDN'den sunulmasına izin verilir). - nemequ
Soru, CSS ile nasıl yapılacağıdır. ben ben Sadece CSS'yi değiştirmeme izin veren bir CMS kullanarak, bu yüzden bu Cevap için googling yaparken sayfa, farklı bir tane değil. Bu yüzden, askerin durumunun neden farklı olmadığını sormak yerine sorulan soruya cevap veriyoruz. - felwithe


Cevaplar:


Ya da belki de 'Gerçekler' yuvarlak bir <span> aşağıdaki gibi:

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

Sonra kullan:

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

202
2017-12-18 21:03



Güzel, ama bu sadece CSS'den ziyade HTML’de bir değişiklik. - mikemaccana
Bazen senin tek seçeneğin - locrizak
span {display: none; } aynı zamanda sahte öğeyi de gizlemelidir. Görünürlüğü kullanmalısınız: bunun yerine gizli - xryl669
görüntü yok; ve görünürlük: gizli; her ikisi de sahte öğeyi gizler - Facundo Colombier
@Mathew açıklığı gizliyor ama sözde öğeyi div'a ekliyor, bu nedenle sözde öğe gizlenmemelidir (görünürlük veya gösterme özelliğini kullanarak) - dewtea


Zorunlu: Bu bir hack: CSS bunu yapmak için doğru bir yer değil, ancak bazı durumlarda - örneğin, sadece CSS tarafından özelleştirilebilecek bir iframe içinde üçüncü parti bir kütüphaneye sahip olursunuz - bu tür bir korsanlık tek seçenek.

Metni CSS'den değiştirebilirsiniz. 'Hoşçakal' yazan kırmızı düğme ile 'merhaba' ile yeşil bir düğmeyi değiştirelimCSS kullanarak. Görmek http://jsfiddle.net/ZBj2m/274/ canlı demo için:

İşte yeşil düğmemiz:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Şimdi orijinal öğeyi gizleyelim, ancak daha sonra başka bir blok öğesi ekleyelim:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Not:

  • Bunu açıkça bir blok öğesi olarak işaretlememiz gerekiyor, 'sonra' öğeleri varsayılan olarak açıklıklıdır
  • Sahte elemanın konumunu ayarlayarak orijinal elemanı telafi etmemiz gerekir.
  • Orijinal öğeyi gizlemeliyiz ve sahte öğeyi visibility. Not display: none orijinal öğe üzerinde çalışmıyor.

164
2018-01-10 15:55



Bu, 10'da çalışmaz, herhangi bir fikri nasıl değiştirebilir? - Solmead
display: none; çalışmıyor çünkü ::after Gerçekten de “bu elemanın içinde, ama sonunda”, herhangi birinin merak ettiği durumda. - Ry-♦
Ne yazık ki, "değiştirilmiş" düğmesi artık bir düğme gibi çalışmıyor. İyi bir örnek, sadece bir düğme için geçerli değildir. - xryl669
görüntü yok; ve görünürlük: gizli; her ikisi de sahte öğeyi gizler - Facundo Colombier
Bunu yaptığımda nasıl olur, öğeyi değiştirir, ancak metin tüm kapaklardır ve küçük harfle değiştirilemez mi? - Jpaji Rajnish


Sözde öğeleri kullanmak ve içerik eklemelerine izin vermek istiyorsanız, aşağıdakileri yapabilirsiniz. Orijinal eleman hakkında bilgi sahibi olmaz ve ek işaretleme gerektirmez.

.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 Örneği


117
2018-02-26 22:14



Bu cevap, diğer cevapların birçoğunun metin düğümleri içinde olmaması gibi yerlerde çalışır. <th> öğesi. - Chris Kerekes
Bu iyi çalışıyor. Benim durumumda, line-height: 0 ve color: transparent ana öğe üzerinde ve bu değerleri sözde sıfırlamak işi yapmak (işe yaramazsa) text-indent) - dontGoPlastic
Olmamalı line-height: normal yerine initial? - Benjamin
Metin girintisini kullanmanın nedeni, orijinal metnin daha uzun olması durumunda, öğenin eski metnin boyutu olarak kalmasıdır, yeni metnin boyutuna küçülmez (istediğinizi varsayarak). - Chris Janssen
genious Metin içeriğinde çalışan teknik. - Robert Koritnik


Dayalı mikemaccana'nın cevabı, bu benim için çalıştı

button {
  position: absolute;
  visibility: hidden;
}

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

§ Mutlak konumlandırma

kesinlikle yerleştirilmiş bir eleman, akıştan dışarı alınır ve böylece   diğer elemanları yerleştirirken yer kaplamaz.


45
2018-06-18 03:51



Benim için bu cevap diğerlerinden daha üstündür çünkü aynı satır içinde bir metin değişimi ile çalışır, yani metin içinde bir satır sonu (HTML ve CSS özel kombinasyonum için) zorlamaz. - pgr


Basit, Kısa, Etkili. Ek html gerekli değildir.

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

Ben woocommerce kırıntıları için, ev dışında bağlantı metni değiştirmek için bunu yapmak zorunda kaldı

SUKDÖ'nün / AZ

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

24
2018-04-16 18:16





Yapamazsın, yapabilirsin.

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

Bu içerik eklenecek sonra öğenin güncel içeriği. Aslında değiştirmez, ancak boş bir div seçebilir ve tüm içeriği eklemek için CSS kullanabilirsiniz.

Ama siz daha çok veya daha az olsa da yapmamalısınız. Gerçek içerik belgeye konulmalıdır. İçerik özelliği esas olarak küçük işaretleme amaçlıdır, alıntılanan metnin etrafındaki tırnak işaretleri gibi.


12
2017-10-25 22:02



Bu yöntemle metni değiştirmek için bir kod kullandığımdan eminim. '<Div class = "pvw-title"> Gerçekler </ div> <div class = "pvw-title"> Gerçekler </ div> 'kullanamıyorum: sonra, çünkü aynı ada sahip birden fazla div sınıf var :( - MokiTa
Tarayıcılar için ne kadar uyumludur? Ve javascript'in bu tür bir esneklik için uzun vadede daha iyi bir seçim olacağından şüpheleniyorum. - Sir
Modern tarayıcılar bunu destekliyor. Ben eski IE sürümleri hakkında emin değilim, ama bu quirksmode.com bakılabilir sanırım. -edit- olabilir: quirksmode.org/css/user-interface/content.html - GolezTrol
Her modern tarayıcı bugün destekliyor: caniuse.com/#feat=css-gencontent - GolezTrol


Kullanmayı deneyin: önce ve sonra:. Biri, html oluşturulduktan sonra metin ekler, diğer ekler html'den önce oluşturulur. Metni değiştirmek isterseniz, düğme içeriğini boş bırakın.

Bu örnek, ekran metninin boyutuna göre düğme metnini ayarlar.

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

Düğme metni:

1) ile: önce

büyük ekranxxx

büyük ekran

2) ile: sonra

xxxbig ekranı

büyük ekran


12
2017-09-12 17:14





Bu benim için inline metin ile çalıştı. FF, Safari, Chrome ve Opera'da test edildi

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

9
2017-08-02 22:39



En son IE 9 ile 11 arasında benim için işe yaramıyor çünkü "görünürlük: görünür": öğesinden sonra: stackoverflow.com/questions/17530947/... - thenickdude


Bu numarayı kullanıyorum:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Bunu sadece bir taban sınıfını değiştirerek sayfaların uluslararasılaştırılması için kullandım ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

8
2017-07-05 12:16



Bu, ekran okuyucuları olan kullanıcılar için sorunludur. Elemanın boşluğunu / görünürlüğünü değiştirmezseniz ve herhangi bir aria ipucu vermezseniz, "görünmez" metniniz yine de bir ekran okuyucu tarafından okunabilir. - Conspicuous Compiler


Bu soruya mükemmel bir şekilde cevap vermeyebilir, ama ihtiyaçlarımı ve belki de başkalarını da memnun etti.

Yani sadece farklı metinleri veya görüntüleri göstermek istiyorsanız etiketi boş tutun ve içeriğinizi birden çok veri özniteliğine yazın bunun gibi <span data-text1="Hello" data-text2="Bye"></span>. Onları sahte sınıflardan biriyle göster :before {content: attr(data-text1)}

Artık aralarında geçiş yapmak için bir sürü farklı yol var. Navigasyonumun isimlerini simgelere değiştirmek için duyarlı bir tasarım yaklaşımı için onları medya sorgularıyla bir arada kullandım.

jsfiddle gösterisi ve örnekleri


7
2017-08-07 10:26