缩短窄屏幕的菜单项名称

Question

当浏览器窗口变窄时，您将如何缩短导航菜单项名称？这可能与CSS媒体查询有关，还是需要使用JavaScript？

smashingmagazine.com就是一个例子。菜单项＆＃34; WORDPRESS＆＃34;缩短为＆＃34; WP＆＃34;当浏览器窗口变得足够窄时。

Answer 1

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

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