Html 根据碰撞元素在按钮中隐藏文本_Html_Css_Angularjs

Html 根据碰撞元素在按钮中隐藏文本

html css angularjs

Html 根据碰撞元素在按钮中隐藏文本,html,css,angularjs,Html,Css,Angularjs,我正在考虑创建一个固定的导航栏，它将位于我的应用程序的视图中。该栏将包含3个元素，一个后退按钮、一个导航下拉菜单和一个可选按钮部分。这三个元素按导航栏的左、中、右对齐这个想法是，后退按钮将实际列出上一部分的内容，例如摘要或个人详细信息。因此，本文将根据上一节展开。导航按钮还将列出您所在的部分，其原理与后退按钮相同。但这篇文章并没有真正关注导航或可选按钮元素我已经链接了一个基本的，让你对我正在做的事情有一个大致的了解。这个想法是当视图端口在215px宽度以下变得足够小，并且back和导航元素发

我正在考虑创建一个固定的导航栏，它将位于我的应用程序的视图中。该栏将包含3个元素，一个后退按钮、一个导航下拉菜单和一个可选按钮部分。这三个元素按导航栏的左、中、右对齐

这个想法是，后退按钮将实际列出上一部分的内容，例如摘要或个人详细信息。因此，本文将根据上一节展开。导航按钮还将列出您所在的部分，其原理与后退按钮相同。但这篇文章并没有真正关注导航或可选按钮元素

我已经链接了一个基本的，让你对我正在做的事情有一个大致的了解。这个想法是当视图端口在215px宽度以下变得足够小，并且back和导航元素发生碰撞时，back按钮中包含的文本将被隐藏，以便只显示V形。目前，你可以看到这是一种在CSS中工作的方式，但是按钮仍然包含宽度，因为按钮的文本被压在V形下。如果根本没有文字的话，我们的想法是只保留V字形的宽度。没有特定的断点，因为文本将根据应用程序的每个部分而有所不同

我想知道是否有可能只用CSS就可以做到这一点？我知道使用JavaScript是可能的，但如果CSS解决方案可用，我宁愿采用这种方式。如果没有CSS解决方案，那么JS将是前进的方向

HTML

编辑：关于建议媒体查询的人，这里有一个可能在元素中包含潜在文本的plunker。现在将浏览器的大小调整到335px宽度以下时，可以看到back元素和navigation元素发生冲突。当文本消失时，“后退”按钮仍然包含基于内部包含的文本的宽度。我希望后退按钮缩小到只有V形。请记住，这些元素中的文本是动态的，取决于用户所处的位置

编辑2：解决方案需要在IE10和11、chrome、FF和Safari中工作。因此，不要担心支持低于IE的任何东西。

为什么要支持低于215px的东西？这背后有什么原因吗？您可以简单地控制或显示显示哪些元素，用以显示哪些元素显示在该宽度上，哪些元素可以隐藏。@如果您查看plunker，您可以看到碰撞低于215px，因为后面和导航按钮中有文本。如前所述，此文本将根据用户在应用程序中的位置动态更改。因此，一旦你开始有更大的字符串，例如个人详细信息，它将以更大的分辨率冲突。而不是后面的一根小绳子。媒体查询不可能，因为不知道用户将在应用程序中的何处，导航和返回元素将填充动态文本。让我重新措辞，您不需要支持215px宽度，请选中此项。正如你所看到的，最低的设备宽度保持在320px，即iphone 3/4/4s/5和其他几款设备，我看不出支持215px宽度的原因，并且可以使用媒体查询来完成，只要元素不发生变化，那么无论其中有什么内容，媒体查询有很多方法。@youssef我不介意支持215px宽的设备。应用程序将有其他相关内容。只是当按钮的宽度达到215px以下时，元素会发生碰撞，从而隐藏后面的文本，但按钮本身的宽度仍然与按下按钮时的文本不同。@youssef我已经在问题中添加了一个编辑部分，希望这将有助于澄清我的来历。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="back-container">
        <button class="back">
          <span class="chevron"></span>
          <span class="text">Back</span>
        </button>
      </div>
      <div class="navigation-container">
        <div class="navigation-container-inner">
          <button class="navigation">Navigation</button>
        </div>
      </div>
      <div class="plus-container">
        <ul class="plus">+</ul>
      </div>
    </div>
  </body>

</html>

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}

.back-container {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
}

.navigation-container {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;

  display: flex;
  justify-content: center;
  text-align: center;
}

.plus-container {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;

  text-align: right;
}

button.back {
  height: 32px;
}

button.back .chevron,
.chevron {
  float: left;
  display: inline-block;
  height: 30px;
  width: 18px;
  background: url(http://games.thediamondjubilee.org/game_images/timeline/black-chevron-left.png);
  background-repeat: no-repeat;
}

button.back .text {
  display:inline-block;
  margin-left: 6px;
}

ul.plus {
  display:inline-block;
}