Question

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

大屏幕：

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

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

小屏幕：

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

最后，当我们什至无法适应时，仅显示svg图标，不显示任何文字：

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

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

.buttons {
  whitespace: nowrap;
}

<div class="buttons">
  <button>
    <span>svg</span>
    <span class="long">
      create new page
    </span>
    <span class="short">
      create
    </span>
  </button>
    <button>
    <span>svg</span>
    <span class="long">
      edit page
    </span>
    <span class="short">
      edit
    </span>
  </button>
</div>

链接到fiddle

Answer 1

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

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

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

提琴：https://jsfiddle.net/cnh3z5jL/

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

编辑：您可以跳过

   text-overflow: ellipsis;

如果您觉得更好

Answer 2

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

使用CSS定位特定的屏幕尺寸，例如：

@media（最小宽度：1440像素）和（最大宽度：1600像素）{ / * *样式在这里 * / }
如果您使用的是angular，请尝试使用ng-class；它将帮助您使用条件类，因此可以放置
之类的东西
...

另外，尝试使用

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

因此它不会溢出。希望对您有帮助

Answer 3

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

<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;
        }
     }

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

3 个答案: