我可以设置元素的大小以适应其潜在内容，而不是其实际内容吗？

Question

考虑一下这个按钮栏：

body {text-align: right;}

<button>Save</button>
<button>Cancel</button>
<button>Delete</button>

现在假设最后一个按钮的内容发生了变化：

body {text-align: right;}

<button>Save</button>
<button>Cancel</button>
<button>Click me again to confirm deletion</button>

如您所见，最右侧按钮的这种变化触发了其左侧的所有按钮移动。

为避免这种情况，我希望按钮的原始大小适合其两个可能内容中较大的一个。

当然，我可以尝试通过多种方式“实现”这一目标。最简单也是最丑陋的就是试验较大的内容需要多少宽度并“硬编码”它：

body {text-align: right;}

#del {display: inline-block; width: 220px;}

<button>Save</button>
<button>Cancel</button>
<button id="del">Delete</button>

但是，我认为这是一个非解决方案，因为无法保证此宽度对其他人来说都是相同的。如果有人有奇怪的字体，或者使用文本放大，或者在移动设备上查看网站，或者其他什么，那么我认为将按钮的宽度设置为硬编码值可能会产生奇怪的结果。

我想另一种方法是 (a) 最初将较长的文本放入按钮 (b) 通过 JavaScript 获取按钮的宽度并保存 (c) 将实际的较短文本放入按钮并设置其宽度到该值。然而，根据我的直觉，这看起来像是一种可怕的黑客行为和矫枉过正。

解决此类问题的规范方法是什么？

Answer 1

我会考虑 data 属性使用伪元素添加两个文本，然后控制不透明度来隐藏/显示它们：

div {
  text-align: right;
}

#del {
  display: inline-block;
  position: relative
}

#del:before {
  content: attr(data-text);
  position:absolute;
  left:0;
  right:0;
  top:1px; /*there is 1px default padding */
  text-align:center;
}

#del:after {
  content: attr(data-alt);
  opacity:0;
}


#del:hover::before {
   opacity:0;
}
#del:hover::after {
   opacity:1;
}

<div><button>Save</button><button>Cancel</button><button data-text="Delete" data-alt="Click me again to confirm deletion" id="del"></button></div>

您只需要知道哪一个会更宽，以使其保持流动以定义宽度并制作另一个position:absolute。

你也可以把正文放在里面：

div {
  text-align: right;
  font-size:14px;
}

#del {
  display: inline-block;
  position: relative;
}

#del span {
  content: attr(data-text);
  position:absolute;
  left:0;
  right:0;
  top:1px; /*there is 1px default padding */
  text-align:center;
}

#del:after {
  content: attr(data-alt);
  opacity:0;
}


#del:hover span {
   opacity:0;
}
#del:hover::after {
   opacity:1;
}

<div><button>Save</button><button>Cancel</button><button  data-alt="Click me again to confirm deletion" id="del"><span>Delete</span></button></div>