javascript - Shortening menu item names for narrow screens

Question

How would you go about shortening navigational menu item names when the browser window is made narrower? Is that possible with CSS media queries, or would you need to use JavaScript?

There is an example of this on smashingmagazine.com. The menu item "WORDPRESS" shortens to "WP" when the browser window gets narrow enough.

Answer 1

例如在同一个 li 中使用两个不同的 span，显示不同的媒体查询：

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