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

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

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

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>