CSS-dan foydalanib mobil versiyada matnga belgi qo'ying

Mening veb-saytimda matn bloki bor:

Distribyutorlar

Specialtyreagents


CSS ichida ushbu blokga - belgisi qo'shilsa, shunday bo'lishi kerak:

Maxsus reaktivlar

Men faqatgina CSS-dan foydalanishim mumkin!

Yordamingiz uchun rahmat.

3
oddiygina, yo'q.
qo'shib qo'ydi muallif jbutler483, manba

6 javoblar

Mobil qurilmada kerakli so'z bilan so'zma-so'z foydalaning va yashirish yoki ko'rsatish uchun shrift o'lchamidan foydalaning.

misol

codepen

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1:after {
  content: 'Specialty-reagents';
  font-size: 0;
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 0;
  }
  h1:after {
    font-size: 32px;
  }
}

Specialtyreagents

</div> </div>

3
qo'shib qo'ydi
Ajoyib. PERFECT ishlaydi. Sizga katta rahmat!
qo'shib qo'ydi muallif Andrii Pryimak, manba

Faqatgina CSS bilan siz - kodini kirita olmaysiz, lekin ma'lum bir holatda ishlatishingiz kerak bo'lsa, bunday matnni yolg'onchi element bilan qayta yozishingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

h1 {
  font-size: 0;
}
h1:before {
  content: "Specialty-reagents";
  display: block;
  font-size: 1.5rem;
}

Specialtyreagents


Specialtyreagents

</div> </div>

2
qo'shib qo'ydi
Mening sharhlarimga qaraganda, bu erda asosiy muammo - ni qanday qo'shish kerakligi haqida o'ylayman, shuning uchun men odaklanaman, lekin baribir, sizning postingiz ovokuro dan asnwer faqat @DanielJames
qo'shib qo'ydi muallif DaniP, manba
Bu ish stoli va mobil telefonda matnni chiziq bilan aks ettiradi. OP faqat uyali telefonda chiziqlarni qidirishni talab qildi.
qo'shib qo'ydi muallif Daniel James, manba

Boshqalar aytganidek, bunga erishish uchun soxta elementdan foydalanishingiz mumkin.

Ketishning eng yaxshi usuli - kichik viewport (ya'ni, mobil telefon) orqali ko'rishda yangi yolg'on elementni qo'shishdir. Bu erda ba'zi bir qo'shimcha pseudo elementlar haqida ma'lumot va ulardan qanday foydalanish mumkin.

Misol ...

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    @media screen and (max-width: 768px) {
    
        h1 {
            font-size: 0px;
        }
    
        h1::after {
            font-size: 30px;
            display: block;
            content: "Specialty-reagents";
        }
    
    }

Specialtyreagents

</div> </div>

Agar media so'roviga max-width va sarlavhaning shrift hajmi bo'lsa, siz o'zgartirishingiz mumkin bo'lgan yagona narsa.

1
qo'shib qo'ydi

Media so'rovi bilan:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

@media only screen and (max-width: 500px) {
  h1 > span:after {
    content: "-";
  }
}

Specialtyreagents

</div> </div>

1
qo'shib qo'ydi

Uzoq safarga ikkita HTML elementi, bitta mobil va bitta ish stoli uchun bo'lishi mumkin:

Specialtyreagents


va

Specialty-reagents


Then, you should have some CSS code for hvaling it:

.desktop {
    display: block;
}
.mobile {
    display: none;
}

@media (max-width: 720px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
}
1
qo'shib qo'ydi
OP faqat CSS-ni o'zgartirishi mumkin
qo'shib qo'ydi muallif sol, manba

Ushbu kodni hal qilish uchun iltimos:

@media only screen and (max-width: 500px) {
  h1 > span:after {
    content: "-";
  }
}
0
qo'shib qo'ydi