我可以设置元素的大小以适合其潜在内容，而不是其实际内容吗? [英] Can I set an element's size to fit its potential content, rather than its actual content?

问题描述

考虑以下按钮栏:

 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)将实际的较短的文本放入按钮并设置其宽度到该值.但是，以我的直觉，这看起来像是骇人听闻的骇客行为和过度杀伤力.

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

解决方案

我会考虑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> 

Consider this bar of buttons:

body {text-align: right;}

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

Now let's say that the last button's content changes:

body {text-align: right;}

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

As you can see, this change in the rightmost button triggered all buttons to its left to move.

To avoid this, I'd like the button's original size to fit the larger one of its two possible contents.

Of course, I can try to "achieve" this in many ways. The simplest and ugliest is to experiment how much width the larger content requires and "hardcode" it:

body {text-align: right;}

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

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

However, I consider it a non-solution because it cannot be guaranteed that this width will be the same for everyone else. If someone has a weird font, or uses text magnification, or views the site on mobile, or whatever, then I suppose setting the button's width to a hardcoded value could produce weird results.

Another way, I suppose, would be to (a) Initially put the longer text to the button (b) Get the button's width through JavaScript and save it (c) Put the actual, shorter text to the button and set its width to that value. To my intuition, however, this looks like a horrible hack and overkill.

What is the canonical solution to troubles like this?

解决方案

I would consider data attribute to add both texts using pseudo elements then control the opacity to hide/show them:

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>

You simply need to know which one will be the wider one to keep it in-flow to define the width and make the other one position:absolute.

You can also keep the main text inside:

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>

这篇关于我可以设置元素的大小以适合其潜在内容，而不是其实际内容吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！