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>

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

1 个答案: