отображение одного слова в <span> как другое слово с использованием css

Question

Итак, слово International например.

Я хотел бы сделать что-то подобное для мобильных телефонов, например:

<span class="word-international">International</span> 

, а затем стиль следующим образом для мобильного телефона:

.word-international{ 
    content:"Int'l"; 
} 

по очевидным космическим причинам (и причины SEO) , Это не работает, но я, кажется, помню, что есть какой-то способ сделать это, я просто не могу вспомнить конкретный тег или атрибут HTML в теге, что-то вроде <abbr> - спасибо!

Answer 1

Свойство содержимого Css работает только на: before,: после псевдо элементов, оно не работает с прямыми элементами. Таким образом, вы могли бы сделать что-то вроде этого

HTML

<span class="test"> 
    <span>Hello</span> 
</span> 

CSS

@media only screen and (max-width: 767px) { 
    .test span { 
     display:none; 
    } 
    .test:after { 
    content: "Test"; 
    } 
} 

Если вы используете мобильный первый подход, то изменить CSS соответственно, надеюсь, что это помогает

Answer 2

If вам действительно нужно физически изменять содержимое в одном элементе, я могу думать об одном способе сделать это. Вы должны создать pseudoelement для мобильных устройств

@media (max-width:720px) { 
    .word-international::before { 
     content:"Int'l"; 
     font-size:12px; 
    } 
    .word-international { 
     font-size:0px; //hide text only. if you hide whole element the pseudoelement won't be visible as well. 
    } 
} 

Но я предлагаю использовать некоторые JS, чтобы изменить содержание элемента или даже лучше иметь два элемента с классами mobile и desktop и использовать медиа-запросы, чтобы показать/скрыть их

@media (max-width:720px) { 
    .word-international.mobile { 
     display: block; 
    } 
    .word-international.desktop { 
     display: none; 
    } 
} 
@media (min-width:721px) { 
    .word-international.desktop { 
     display: block; 
    } 
    .word-international.mobile { 
     display: none; 
    } 
} 

Как обычно это делается.