縮短窄屏幕的菜單項名稱

當瀏覽器窗口縮小時，如何縮短導航菜單項名稱？ CSS媒體查詢有可能，或者你需要使用JavaScript？縮短窄屏幕的菜單項名稱

在smashingmagazine.com上有一個這樣的例子。當瀏覽器窗口變得足夠窄時，菜單項「WORDPRESS」縮短爲「WP」。

2013-06-24 Kris Hunt

你不能沒有'用CSS做明確，這可能會有點奇怪。你用JS試過了什麼？ –

例如使用兩個不同的跨度中顯示不同的媒體查詢同裏：before` /`：after` +`content`

<ul> 
    <li> 
     <span class="show-desktop">Wordpress</span> 
     <span class="show-mobile">WP</span> 
    </li> 
</ul>

2013-06-24 14:57:03

哦，是的，節目桌面類用於更大的屏幕，節目移動類用於更小/更窄的屏幕。 –

聰明！這隻適用於Bootstrap，對吧？ –

它適用於任何使用媒體查詢的CSS，它們定義了.show-desktop可隱藏在小屏幕上，而.show-mobile可隱藏在更寬的屏幕上。 Bootstrap可能會使用其他類，我只是把它們寫成了我寫的:) –

回答