我有這個按鈕，其中包含Upgrade my account。CSS響應文本內容

我想有一個規則，對於屏幕說小於990px，它應該是Upgrade代替（如Upgrade my account太長）...

我可以清晰地實現在CSS（不加兩個版本和一個display: none而另一個顯示...）？

我試圖

@media(max-width: 990px) { 
    .navbar-btn { 
     content: 'Upgrade' 
    } 
    }

，但它不會工作...

感謝

來源

2014-02-26 Augustin Riedinger

不要把CSS內容，想想使您的網站以不同語言本地化。 – moonwave99

使用span和顯示/隱藏根據屏幕尺寸：

HTML

<button class='navbar-btn'> 
    Upgrade<span> my Account</span> 
</button>

CSS：

@media(max-width: 990px) { 
    .navbar-btn span { 
     display:none; 
    } 
}

JSFiddle

來源

2014-02-26 16:03:03 Reeno

這是對我來說最優雅的解決方案，因爲所有內容都在html文件中，只有顯示邏輯位於CSS一側。 –

見

Fiddle

的content屬性僅適用ŧ ○:before和:after僞元素，這也意味着你將可以把你的CSS..which內容（文本）我不會傾向於建議..

HTML

<div class='navbar-btn'></div>

CSS

.navbar-btn { 
    position:relative; 
} 
.navbar-btn:after { 
    position:absolute; 
    left:0; 
    content:'Upgrade my Account'; 
} 
@media(max-width: 990px) { 
    .navbar-btn:after { 
     content:'Upgrade'; 
    } 
}

來源

2014-02-26 16:00:16 SW4

我建議一路上我在這個demo

CSS做了一些：

@media(min-width: 990px) { 
    .navbar-btn:after { 
    content: ' account' 
    } 
}

HTML：

<button class='navbar-btn'>Upgrade</button>

來源

2014-02-26 16:01:21 gernberg

好的解決方案，可能更準確，更輕鬆，更靈活的方法。 –

說你的HTML是在以下

<div class="navbar"> 
    <span>Upgrade my account</span> 
</div>

您的媒體查詢可以

@media(max-width: 990px) { 
    .navbar:before { 
     content: 'Upgrade' 
    } 
    .navbar > span {display:none;} 
}

Example

來源

2014-02-26 16:02:20 Pete

CSS響應文本內容

回答

Fiddle

相關問題