如何更改<span>CSS 媒體查詢中的文本</span>

Question

我正在嘗試更改媒體查詢中<span>元素內的文本，並且我想盡可能避免使用 JavaScript。 有沒有辦法只用 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>

當窗口寬度小於 768px 時，我希望<header>的兩個<span>被縮寫為一個字符（“C”和“A”）。

我在W3 上尋找可以做到這一點的屬性，類似於（我認為）JavaScript 的.innerHtml ，我找到了content ，但它似乎沒有做我想要的。

如果需要，我願意使用 JavaScript，如果它只需要幾行 CSS，我只想避免它。

Answer 1

您可以在 CSS 中設置span標簽的寬度。 為了能夠使用寬度，您需要display:block; . 您使用overflow:none; 隱藏文本的其余部分。

跨度的寬度必須取決於字體大小和字體系列。 使用等寬字體會有所幫助，因為所有字符的寬度都相同。

 @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

這是另一種使用::before偽元素的方法（加上包裝在另一個跨度中的原始內容），但使用自定義數據屬性來定義替代文本，而不必為每次出現添加一個類。 例如，這允許通過 CMS 填充文本。

 @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

您可以像這樣使用偽選擇器:before ：

 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>

在進行了一些研究之后，您也不會因為這種方法而失去任何可訪問性。