无法分配相对于最外面容器的宽度

Question

在下面的摘要中，我想为跨度分配一个最大宽度的％10实际上宽度的百分比。

，我想，因为容器的宽度是由内容确定的，所以它似乎是跨度宽度的10％，该跨度包含不受限制的文本。

如何获得所需的输出？

jsfiddle链接：https：//jsfiddle.net/68ha60p6/

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  }

<div style="float:right; height:100%;padding-right:1%"> 
<button style="display:inline-block; height:70%;background-color:green; color:white;border:none; padding:0;">
<span style="display:inline-block; max-width:10%; text-overflow:ellipses;overflow:hidden; max-height:100%;text-align:center;white-space:no-wrap;">John John</span>
</button>
</div>
</div>

Answer 1

对于跨度的宽度，使用 max-width:10vw;代替 max-width:10%;

1vw等于视口（浏览器窗口）宽度的1％。