响应式设计：如何仅使用CSS隐藏小视口的图标标签？

我正在使用该框架进行响应性布局

我在导航栏上的文本旁边添加了一些图标（图标字体跨度），下面是我希望发生的事情：

---

当视口不够宽，无法在一行上显示所有导航项目时，应仅隐藏将级联到下一行的项目的文本标签，并将该项目的字体大小（图标大小）增加到新的固定值

我附上3张图片（我刚刚用chrome inspector作弊）来展示我在寻找什么

如果没有JavaScript，这是可能的吗？如果是，怎么做

---

根据您的喜好和需要进行编辑

@media only screen and (max-device-width: 480px) { 

  html {
    -webkit-text-size-adjust: none;
  }

  .tooBig {
    display: none;
  }

}

---

根据您的喜好和需要进行编辑

@media only screen and (max-device-width: 480px) { 

  html {
    -webkit-text-size-adjust: none;
  }

  .tooBig {
    display: none;
  }

}

---

试试这样的

CSS:

---

在HTML标记中，将“noshow”类应用于要隐藏的文本。

是否尝试类似的操作

CSS:

在HTML标记中，将“noshow”类应用于要隐藏的文本。

以下是W3C建议的解决方案：

假设您想使用以下HTML代码：

<li><a href="#">Documentation</a></li>

<li>
  <a href="#">
    <span class="icon">X</span>
    <span class="text">Documentation</span>
  </a>
</li>

此解决方案强制您为图像创建两个版本。但实际上不建议调整图像大小，因此处理一个图像的两个版本并不是一个坏主意

在您的特定情况下，如果您使用的是字体图标，您可能会使用这种HTML代码：

<li><a href="#">Documentation</a></li>

<li>
  <a href="#">
    <span class="icon">X</span>
    <span class="text">Documentation</span>
  </a>
</li>

所以

以下是W3C建议的解决方案：

假设您想使用以下HTML代码：

<li><a href="#">Documentation</a></li>

<li>
  <a href="#">
    <span class="icon">X</span>
    <span class="text">Documentation</span>
  </a>
</li>

此解决方案强制您为图像创建两个版本。但实际上不建议调整图像大小，因此处理一个图像的两个版本并不是一个坏主意

在您的特定情况下，如果您使用的是字体图标，您可能会使用这种HTML代码：

<li><a href="#">Documentation</a></li>

<li>
  <a href="#">
    <span class="icon">X</span>
    <span class="text">Documentation</span>
  </a>
</li>

---

我通过对答案进行迭代找到了一个解决方案。我正在使用，但我将首先显示其CSS输出：

nav .nav-bar .icon {
  font-size: 24px;
  padding-right: 4px;
}

@media only screen and (max-width: 700px) {
  nav .nav-bar li:nth-child(1) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  nav .nav-bar li:nth-child(2) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  nav .nav-bar li:nth-child(3) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1000px) {
  nav .nav-bar li:nth-child(4) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1100px) {
  nav .nav-bar li:nth-child(5) .icon-label {
    display: none;
  }
}

此解决方案的工作原理是每减少100像素隐藏一个标签。不幸的是，它要求列表中的每个元素都有一个新的规则，因此它要求样式表

确切了解列表长度，或

包括不超过合理最大长度的可能未使用的指令

我选择创建一个可重用的源代码，并使源代码不那么冗长

@mixin iconlist( $min-width, $label-selector, $step: 100px, $count: 5 )
  //
   The iconlist() mixin will responsively hide labels, 
   starting from the last, as the viewport width is decreased.

   This can be included in a horizontal list to show only icons
   on small screens, while still displaying as many labels as
   possible, assuming items are prioritized from most important
   to least.

  @for $i from 1 through $count
    $max-width: $min-width + ( $step * $i )
    @media only screen and (max-width: #{$max-width})
      li:nth-child(#{$i})
        #{$label-selector}
          display: none

用法

.nav-bar
  // Responsively hide 0-3 labels from the end of the list.
  @include iconlist(600px, '.icon-label', 100px, 3)

---

如果有人愿意建议一个重构，使CSS更小或更好地解耦，那就太棒了！但是我不知道该怎么做。

我通过对答案的迭代找到了一个解决方案。我正在使用，但我将首先显示其CSS输出：

nav .nav-bar .icon {
  font-size: 24px;
  padding-right: 4px;
}

@media only screen and (max-width: 700px) {
  nav .nav-bar li:nth-child(1) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  nav .nav-bar li:nth-child(2) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  nav .nav-bar li:nth-child(3) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1000px) {
  nav .nav-bar li:nth-child(4) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1100px) {
  nav .nav-bar li:nth-child(5) .icon-label {
    display: none;
  }
}

此解决方案的工作原理是每减少100像素隐藏一个标签。不幸的是，它要求列表中的每个元素都有一个新的规则，因此它要求样式表

确切了解列表长度，或

包括不超过合理最大长度的可能未使用的指令

我选择创建一个可重用的源代码，并使源代码不那么冗长

@mixin iconlist( $min-width, $label-selector, $step: 100px, $count: 5 )
  //
   The iconlist() mixin will responsively hide labels, 
   starting from the last, as the viewport width is decreased.

   This can be included in a horizontal list to show only icons
   on small screens, while still displaying as many labels as
   possible, assuming items are prioritized from most important
   to least.

  @for $i from 1 through $count
    $max-width: $min-width + ( $step * $i )
    @media only screen and (max-width: #{$max-width})
      li:nth-child(#{$i})
        #{$label-selector}
          display: none

用法

.nav-bar
  // Responsively hide 0-3 labels from the end of the list.
  @include iconlist(600px, '.icon-label', 100px, 3)

---

---

如果有人愿意建议一个重构，使CSS更小或更好地解耦，那就太棒了！但是我不知道该怎么做。

您能更改HTML代码吗？或者你需要遵循一个吗？当然，我可以改变任何东西。“只有那些会层叠到下一行的项目”-我的直觉告诉我，用CSS表达这个约束实际上是不可能的。您必须在常规流中查询项目的x位置，我不知道脚本是否可以，更不用说CSS了。（传统上不允许对布局步骤的结果进行太多检查）您可以更改HTML代码吗？或者你需要遵循一个吗？当然，我可以改变任何东西。“只有那些会层叠到下一行的项目”-我的直觉告诉我，用CSS表达这个约束实际上是不可能的。您必须在常规流中查询项目的x位置，我不知道脚本是否可以，更不用说CSS了。（传统上不允许检查布局步骤的结果。）很好的解决方案，但请注意，我使用的是基于矢量的图标字体，而不是背景图像。谢谢，尝试一下。我根据您的解决方案想出了一个效果非常好的解决方案，虽然对于长列表，它可能有点冗长。当达到最小宽度时，您的解决方案会正确隐藏标签文本，但对于列表中的所有标签，它都会这样做。我正在寻找一种解决方案，它只隐藏在一行上呈现列表所需的标签，从最后一个列表项开始。我将在下面发布我的解决方案作为答案。很好的解决方案，但请注意，我使用的是基于矢量的图标字体，而不是背景图像。谢谢，尝试一下。我根据您的解决方案提出了一个非常好用的解决方案，尽管对于长列表可能有点冗长。当达到最小宽度时，您的解决方案会正确隐藏标签文本，但它会对列表中的所有标签执行此操作。我正在寻找一种解决方案，它只隐藏在一行上呈现列表所需的标签，从最后一个列表项开始。我会把我的答案贴在下面。哈哈，被否决了吗？我们都在说同样的话，只是有更多/更少的细节。对不起，你的回答没有完全错误，但它没有满足问题提出的要求。不管怎样，谢谢你的帮助！哈哈，被否决了？我们都在说同样的话，只是有更多/更少的细节。对不起，你的回答没有完全错误，但它没有满足问题提出的要求。不管怎样，谢谢你的帮助！