如何更改<span>CSS 媒体查询中的文本</span>

Question

I am trying to change the text inside a <span> element within a media query, and I want to avoid using JavaScript if possible. Is there a way to do this with only HTML/CSS?

 @media only screen and (max-width: 768px) { header .text-1 { /* property here? */ } header .text-2 { /* property here? */ } }

 <header> <div class="banner"> <span class="text-1">COLMAR</span> <!-- change to "C" --> <span class="text-2">ACADEMY</span> <!-- change to "A" --> </div> </header>

When the window is less than 768px wide, I want the two <span> s in the <header> to be abbreviated to just one character ("C" and "A").

I looked on W3 for a property that would do this, something similar to (I think) JavaScript's .innerHtml , and I found content , but it doesn't seem to do what I am looking for.

I am willing to use JavaScript if necessary, I just want to avoid it if it only takes a couple lines in CSS.

Answer 1

You could set the width of the span tag in CSS. For the width to be able to be used, you need display:block; . You use overflow:none; to hide the rest of the text.

The width of the span will have to depend on font size and font family. Using a monospace font will help as all the characters are the same width.

 @media only screen and (max-width: 768px) { header .text-1, header .text-2{ width: 11px; overflow: hidden; display:inline-block; } }

 <header> <div class="banner"> <span class="text-1">COLMAR</span> <!-- change to "C" --> <span class="text-2">ACADEMY</span> <!-- change to "A" --> </div> </header>

Answer 2

Here's another approach using the ::before pseudo element as well (plus the original content wrapped in another span), but using a custom data attribute to define the alternative text instead of having to add a class for each occurrence. This allows to fill in the text via a CMS for example.

 @media only screen and (max-width: 768px) { [data-alttext] > span { display: none; } [data-alttext]::before { content: attr(data-alttext); } }

 <header> <div class="banner"> <span class="text-1" data-alttext="C"><span>COLMAR</span></span> <!-- change to "C" --> <span class="text-2" data-alttext="A"><span>ACADEMY</span></span> <!-- change to "A" --> </div> </header>

Answer 3

You could use the pseudo selector :before as so:

 header .text-1:before { content: "COLMAR"; } header .text-2:before { content: "ACADEMY"; } @media only screen and (max-width: 768px) { header .text-1:before { content: "C"; } header .text-2:before { content: "A"; } }

 <header> <div class="banner"> <span class="text-1"></span> <!-- change to "C" --> <span class="text-2"></span> <!-- change to "A" --> </div> </header>

After doing a little bit of research you don't lose any accessibility with this approach either.