Html 固定动画扩展div中的内容布局

对此,

?
这是一个段落，提供了更多关于东西的信息，可以通过悬停在问号上来访问。（将鼠标移开以缩回。）

例子


我叫肖恩
?
有这个名字的人往往是热情的，富有同情心的，直觉的，浪漫的，并且有磁性的个性。他们通常是人道主义者，心胸开阔，慷慨大方，并且倾向于从事能够为人类服务的职业。因为他们是如此深情和给予，他们可能会被强加。他们很浪漫，很容易坠入爱河，但可能很容易受伤，有时脾气暴躁

我正在节食
?
当我看到食物，我就想吃

我想解决两个问题：

将鼠标悬停在问号上，您可以看到，当div展开时，其中的文本会不断地重新格式化，以适应div。相反，我想做的是，根据div完全展开时的大小，文本已经处于正确的大小

如何动态选择DIV的大小，使其最大扩展大小为其中包含的文本大小？我尝试了100%，但这只是使其成为网页的大小

1） 要使文本在容器展开时不会重新定位，需要将段落元素的宽度设置为展开框的宽度：

.test:hover, .test p {
    width: 750px;
}

另外，您将

p

元素设置为

display:inline必须更改为
显示：块（尽管
内联块
也可以工作），因为您不能显式设置
内联
元素的宽度

演示：

2） 这有点棘手。如果没有脚本，如果不使用
高度
或
宽度
的
自动
，就无法使元素收缩到其内容的大小，据我所知，您无法轻松地从指定的
高度
或
宽度
转换到
自动
，但这里有一些建议：


或者，作为一种简单的折衷方案，您可以设置：

.test:hover {
    height: auto;
}

因此，高度不会过渡，但仍然会得到一个大小合理的长方体，宽度也会很好地扩展

演示：

3） 此外，您可能需要考虑使用而不是重复
？
：

演示：
谢谢+1用于psuedo元件
.test:hover {
    height: auto;
}

.test:before {
    content:'?';
    margin: 0;
    color: white;
    font-size: 2em;
    font-weight: bold;
}
.test:hover:before {
    display: none;
}