Question

当前小提琴： https://fiddle.jshell.net/Benihana77/cjtg5ojf/

设置： 我们有一个灵活的促销，主要文本和按钮/链接文本的长度都是可变的。按钮/链接是内联的，末尾有一个扩展箭头，在悬停时会增加一定量（20px）。

问题： 因为这两个变量都非常灵活，所以我们可以遇到这样的情况，其中带箭头的按钮/链接可能足够薄以与主文本放在同一行上，但是在悬停时，将进入填充并弹出。那当然是一次真正糟糕的经历。当它已经太宽而不适合时，我可以处理它，但是当它不适合时只能悬停。

我想弄清楚的是什么： 有没有办法有效地“填充”按钮？即，无论它的宽度（可变）+ 20px，如果在悬停时太宽，它会自动地自动出现在它自己的线上？

我已经尝试了calc（），但我知道这不是真的如何运作。白色空间：无包裹和溢出有其他不良影响。我知道这对于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>

避免在展开的悬停状态下进行元素包装

1 个答案: