css - 避免元素在展开的悬停状态下换行

Question

当前的 fiddle : https://fiddle.jshell.net/Benihana77/cjtg5ojf/

设置:我们有一个灵活的促销，其中正文和按钮/链接文本的长度都是可变的。按钮/链接是内联的，末尾有一个扩展箭头，悬停时会增加一定数量 (20px)。

问题:因为这两个变量都非常灵活，我们可能会遇到以下情况:带箭头的按钮/链接可能足够细以适合与主文本在同一行，但在悬停时，将遇到填充并向下弹出。那当然是一次真正糟糕的经历。当它已经太宽而无法容纳时，我可以处理它，但当它不适合时，仅在悬停时。

我想弄清楚的是:有没有办法有效地“填充”按钮？也就是说，无论它的宽度(可变的)+ 20px，所以如果它在悬停时会太宽，它会预先自动在自己的行上吗？

我已经尝试过 calc()，但我知道这并不是它真正的工作原理。 white-space: no-wrap 和 overflows 有其他不良影响。我知道这对 JS 来说非常容易(只需检测宽度，添加 20px，badda bing badda boom)，但我希望避免这种依赖性。

最坏情况:我要么使用 JS，要么将它强制到第二行。

感谢您的帮助!

Answer 1

在基本状态上添加一个 margin-right，在悬停时将其取消:

html,
body {
  width: 100%;
  height: 100%;
}

.promo {
  background: #a30b35;
  border: 0;
  color: #fff;
  cursor: pointer;
  font: 20px "DINPro", sans-serif;
  padding: 40px;
  text-transform: uppercase;
  transition: all .2s;
  width: 485px;
}

.promo-text {
  display:inline;
}

.button {
  color: #000;
  line-height: .9;
  display: inline-flex;
}

.button-text {
  float: left;
}

.arrow {
  float: left;
  width: 70px;
  margin: 8px 0 0 10px;
  margin-right: 20px; /* added */
  height: 2px;
  background: #000;
  transition: all 200ms ease-in-out;
}

.arrow svg {
  margin: -5px -1px 0 0px;
  float: right;
  fill: #000;
  transition: all 200ms ease-in-out
}

.button:hover .arrow {
  width: 90px;
  margin-right: 0px; /* added */
}

.button:hover .arrow svg {}

<div class="promo">

  <div class="promo-text">
  The 2017 Jimmy Aard lle ipaei acndamy, ace Jace ace une 26.</div>
  
  <div class="button">  
    <div class="defense">
      <div class="button-text">
        Rea fgdd fgdmmmore asasas asa 
      </div>
      <div class="arrow">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="8px" height="12px" viewBox="0 0 7.1 11.4" style="enable-background:new 0 0 7.1 11.4;" xml:space="preserve">
          <polygon class="st0" points="1.4,11.4 0,10 4.3,5.7 0,1.4 1.4,0 7.1,5.7 " />
        </svg>
      </div>
    </div>    
  </div>
  
</div>