css - 我可以设置一个元素的大小来适应它的潜在内容，而不是它的实际内容吗？

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>