如何实现指定文本在常规屏幕显示、移动端小屏幕隐藏？

Got it, let's get this sorted! The simplest and most reliable way to make specific text visible on desktop but hidden on mobile is using CSS media queries. Here's exactly how to implement it for your code:

Step 1: Add a custom class to the text element you want to hide on mobile #

First, modify your HTML to add a class like desktop-only to the element containing the text you want to hide. Looking at your code, that's the span wrapping the font tag with {{ text_account }}:

<div class="topnav"> 
  <div id="top-links" class="nav-float-right"> 
    <ul class="list-inline"> 
      <li class="dropdown">
        <a href="{{ account }}" title="{{ text_account }}" class="dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-user"></i> 
          <!-- Add the desktop-only class to this span -->
          <span class="desktop-only"><font size="2">{{ text_account }}</font></span> 
          <span class="caret"></span>
        </a> 
        <ul class="dropdown-menu dropdown-menu-right"> 
          {% if logged %} 
          <li><a href="{{ account }}">{{ text_account }}</a></li> 
          <li><a href="{{ order }}">{{ text_order }}</a></li> 
          <li><a href="{{ transaction }}">{{ text_transaction }}</a></li> 
          <li><a href="{{ download }}">{{ text_download }}</a></li> 
          <li><a href="{{ logout }}">{{ text_logout }}</a></li> 
          {% else %} 
          <li><a href="{{ register }}">{{ text_register }}</a></li> 
          <li><a href="{{ login }}">{{ text_login }}</a></li> 
          {% endif %} 
        </ul> 
      </li> 
    </ul> 
  </div> 
</div>

Step 2: Add CSS to hide the class on mobile screens #

Next, add this CSS to your stylesheet (either in a <style> tag in your HTML head or your external CSS file):

/* Keep the text visible on desktop by default */
.desktop-only {
  display: inline-block;
}

/* Hide the text on screens smaller than 768px (standard mobile breakpoint) */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}

How this works: #

• The desktop-only class ensures the text stays visible on larger screens.
• The media query @media (max-width: 767px) targets all screens smaller than 768px (most mobile devices), and sets display: none to hide the text entirely on those devices.

If you need to target a different mobile size, just adjust the max-width value (e.g., 575px for smaller phones). This method is fully supported across all modern browsers and won't break your existing layout.

内容的提问来源于stack exchange，提问作者wasikovee