缩短窄屏幕的菜单项名称

【问题标题】：Shortening menu item names for narrow screens缩短窄屏幕的菜单项名称
【发布时间】：2013-06-24 22:57:03
【问题描述】：

当浏览器窗口变窄时，您将如何缩短导航菜单项的名称？这可以通过 CSS 媒体查询实现吗，还是需要使用 JavaScript？

smaskingmagazine.com 上有一个这样的例子。当浏览器窗口足够窄时，菜单项“WORDPRESS”会缩短为“WP”。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

哦，是的，show-desktop 类用于更宽的屏幕，show-mobile 类用于更小/更窄的屏幕。
它适用于任何使用媒体查询的 CSS，这些媒体查询已将 .show-desktop 定义为隐藏在小屏幕上，并将 .show-mobile 定义为隐藏在更宽的屏幕上。 Bootstrap 可能会使用其他类，我只是在写的时候编造了这些 :)
是的。我猜 Bootstrap 的略有不同。谢谢！
是的，它实际上是 .visible-phone 和 .visible-desktop，虽然很接近！ :)