如何使用 width: auto 转换内容的宽度？
Posted
技术标签:
【中文标题】如何使用 width: auto 转换内容的宽度？【英文标题】：How can I transition width of content with width: auto? 【发布时间】：2016-12-03 06:26:46 【问题描述】：我有一个元素，我想在其内容更改时为其宽度设置动画。它有width: auto，这永远不会改变。我见过this trick，但这是用于在两个值之间转换并设置一个。我根本不操纵值，只操纵内容，并且我希望元素的大小随动画而变化。这在 CSS 中完全可能吗？
这是我的代码的简化版本：
.myspan
background-color: #ddd;
.myspan:hover::after
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>当用户将鼠标悬停在元素上时，我希望改变大小的动画。
【问题讨论】：
您不能仅使用 CSS 为auto 制作动画。要么使用您链接到的“最大高度”技巧，要么在页面加载时运行一个设置最终高度的小脚本
@LGSon 在这种情况下我如何使用最大宽度技巧，过渡中的两个值都是可变的？
另外，“当内容发生变化时”是什么意思？...他们为什么要那样做？如果您使用 JS 来做到这一点......然后使用 JS 来“自动”改变宽度，
使用max-width 技巧，你可以给它一个足够大的值来容纳最宽的值。如果您发布您的 HTML 和 CSS，我也许可以为您制作一个示例
伪?? ...现在你肯定需要发布你的代码
【参考方案1】：
正如我评论的那样，（还）无法为auto 设置动画，因此请使用max-width/max-height 技巧，或者，如果您需要更精确，请使用脚本设置宽度。
使用max-width/max-height 技巧，给它一个足够大的值来容纳最宽的值。
堆栈sn-p
.myspan
display: inline-block;
font-size: 30px;
background-color: #ddd;
vertical-align: bottom;
.myspan::after
content: " \00a0\f12a ";
font-family: ionicons;
font-size: 80%;
display: inline-block;
max-width: 0;
transition: max-width .6s;
vertical-align: bottom;
overflow: hidden;
.myspan:hover::after
max-width: 80px;
transition: max-width 1s;
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<span class="myspan">Hello!</span>【讨论】：
对，在伪元素上做。我以为您建议将其放在主要元素上，这就是我感到困惑的原因；） @LukeTaylor 如果您的关闭图标具有预定义的宽度，您可以只使用 width 代替，并为伪图标提供包含的最终宽度 抱歉，您能帮我多一点吗？将overflow: hidden 与display: inline-block 结合使用会使离子图标消失。
@LukeTaylor 更新了我的答案
嗯，当我尝试创建一个演示该问题的 MCVE 时，它似乎有效。解决不了我就回来。【参考方案2】：
我觉得很有用
const expandBtn = document.getElementById('expand-btn');
expandBtn.onclick = (e) =>
e.target.nextElementSibling.classList.toggle("active");
ul
background-color: yellow;
overflow: hidden;
transition-duration: 1s;
transition-property: max-height;
height: auto;
max-height: 0;
ul.active
max-height: 600px;
<button id="expand-btn">Expand</button>
<ul>
<li>Hihi</li>
<li>Hello</li>
<li>Rap star</li>
<li>Hiphop</li>
</ul>【讨论】：
以上是关于如何使用 width: auto 转换内容的宽度？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 width: auto 使选项卡的宽度随文本内部的变化而变化在 Qt5 中的 QTabBar::tab 中？