Html 如果特定元素不适合容器，如何隐藏它们？

给定一个导航栏样式容器，其中包含按钮列表。按钮包含svg图像和一些文本。按钮的数量可能在运行时发生变化，文本也可能因i18n而发生变化。这几乎消除了仅通过媒体查询解决此问题的可能性

大屏幕：

 ------------------------------------------
| --------------------    ---------------  |
||svg create new page |  | svg edit page | |
| --------------------    ---------------  |
 ------------------------------------------

当屏幕变小时，应使用另一种较短的文本：

小屏幕：

 -------------------------------
| -----------    ----------     |
||svg create |  | svg edit|     |
| -----------    ----------     | 
 -------------------------------

最后，当我们甚至无法满足此要求时，只显示svg图标，不显示文本：

 -------------------
| -----    -----    |
|| svg |  | svg |   |
| -----    -----    | 
 -------------------

我以前是使用媒体查询来实现这一点的，但是随着按钮在运行时更改的越多，这就变得越来越复杂和困难。有没有更好的方式让css支持这样的东西

。按钮{
空白：nowrap；
}

svg
创建新页面
创造
svg
编辑页面
编辑

我知道你问的不完全是这个问题，但以下几点如何：

.buttons {
  display: flex;
  flex-flow: row nowrap;
}

button {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

小提琴：

它隐藏从窗口右侧开始的上下文，使窗口变小。这对你有用吗

编辑：您可以跳过

   text-overflow: ellipsis;

---

如果您觉得这样更好，我有两种可能的解决方案：

使用css来确定特定的屏幕大小，例如：

@介质（最小宽度：1440px）和（最大宽度：1600px）{ /* *风格就在这里 */ }

如果您使用angular，请尝试使用ng类；它将帮助您使用条件类，这样您就可以

…

另外，尝试使用

.yourClass{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

所以它不会溢出。

---

我希望这有助于

使用替代按钮，并像按钮一样为其添加样式

<a href="" class="test button"></a>


    @media (min-width: 1440px) and (max-width: 1600px) {

    .test:before {
      content:"hi large text";
        display:block;
    }

  } 


   @media (min-width: 800px) and (max-width: 1200px) {

    .test:before {
      content:"hi medium text";
        display:block;
    }

  } 



    @media only screen and (max-width: 767px) {
           .test:before {
          content:"hi small text";
            display:block;
        }
     }

@介质（最小宽度：1440px）和（最大宽度：1600px）{
.测试：之前{
内容：“hi大文本”；
显示：块；
}
} 
@介质（最小宽度：800px）和（最大宽度：1200px）{
.测试：之前{
内容：“中文本”；
显示：块；
}
} 
@仅介质屏幕和（最大宽度：767px）{
.测试：之前{
内容：“hi小文本”；
显示：块；
}
}

不幸的是，这正是我试图解决的问题：我不想显示“编辑pa”、“编辑p…”或“创建n”的按钮。这有点老套，但如何：或者在两个字之间多留一点空白：您能澄清解决方案1吗？我不确定变量中应该包含什么，因为没有固定宽度的断点，我可以使用（就像创建响应性布局时经常使用的那样）尝试使用开发工具和切换设备工具栏，这样您就可以玩屏幕视口，这样您就可以找到断点，并使用@media query将其作为目标，与制作响应式布局相同，也可以尝试使用响应式单元。这仅在存在一个变量时有效：视口大小。在这种情况下，元素本身有一个带的变量，该变量应该放在一行中。因此，断点始终取决于元素大小和视口大小，这使得无法确定固定断点