仅CSS：如果特定元素不适合容器，则将其隐藏

Posted 2023-01-08

给出了导航栏样式的容器，其中包含按钮列表。这些按钮包含svg图像以及一些文本。按钮的数量可能会在运行时更改，文本也可能由于i18n而改变。这几乎消除了仅通过媒体查询解决此问题的可能性。

大屏幕：

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

当屏幕变小时，应使用替代的较短文本：

小屏幕：

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

最后，当我们甚至无法做到这一点时，仅显示svg图标，不显示任何文字：

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

我以前使用媒体查询来使它工作，但是随着按钮在运行时可能改变的越多，这变得越来越复杂和困难。 CSS是否有更好的方法支持这样的东西？

链接到fiddle

答案

我不完全知道您要问的是什么，但是以下内容如何：

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


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

小提琴：https://jsfiddle.net/9o8vLkbq/

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

编辑：您可以跳过

   text-overflow: ellipsis;

如果对您来说看起来更好

另一答案

我有两种可能的解决方案：

1. 也使用CSS来指定特定的屏幕尺寸，例如：

   @ media（最小宽度：1440px）和（最大宽度：1600px）/ **样式在这里* /

2. 如果您使用的是角度，请尝试使用ng-class;它会帮助您使用条件类，因此您可以输入类似

   的内容

   ... some-element>

也尝试使用

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

所以它不会溢出。希望对您有所帮助