Javascript slideToggle（）动画期间的跨文本换行问题

问题是，当slideToggle（）设置动画时，span标记没有正确的文本包装。只有动画完成后，才能正确包装跨度内容

我正在尝试使用jQuery在按钮按下时添加更多内容。不只是把它放进去，而是有一些动画，比如slideToggle（）提供的动画

是否对此进行了修复，或者我如何以稍微不同的方式实现它，以避免在动画期间内容没有包装

以下是一个例子：

$（'.toggle'）。单击（函数（）{
$（'.moreContent'）.slideToggle（）；
});
p{
最大宽度：300px；
}
.隐藏{
显示：无；
}

列表：
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。内克，比泰。
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。坐在身体的另一边，以最大限度地保持通透。




切换

之所以存在跳转，是因为为了给幻灯片设置动画，跨度必须有一个高度，但只有在
display:inline block
或
display:block
时，跨度才能有一个高度，这意味着它也将有一个宽度。您可以看到，当元素设置动画时，jQuery正在将
display:inline block
添加到元素的style属性中。动画完成后，jQuery将删除style属性，并返回到上一个布局，即内联

我不知道您的用例是什么，或者哪些部分是重要的（例如幻灯片动画是重要的部分，或者仅仅是动画中的某个部分？它必须以一个句子结尾？是两行？等等）。下面是几个例子，可能会给你一些想法去探索

首先，您可以使用jQuery切换类并在CSS中定义动画，而不是依赖jQuery来处理动画。第一个示例将容器高度设置为最大2米，溢出：隐藏（因此将显示2行，其余隐藏）。然后，单击切换按钮切换类，当添加
.show_all
类时，它会为
max height
属性设置动画，从而生成幻灯片动画。最大高度只需要足够大，以显示容器中可能存在的任何内容。如果变量很大，可以将其设置为较大的数字（因为除非需要，否则不会占用空间）。但是，您可能需要调整动画编号

第二个示例使用不透明度，并将动画设置为在单击“切换”时淡入/淡出文本。隐藏的文本仍然会占用空间，因此如果您不想这样做，可以使用CSS来解决这个问题。可能会给隐藏的文本一个负z索引，并使用边距或切换按钮的位置

我假设你已经建立了一个简单的例子，所以我不想太多的细节，只是想提供一些解决问题的其他方法


$（'.toggle'）。单击（函数（）{
$（'.content'）.toggleClass（'show_all'）；
});
$（'.toggle fade'）。单击（函数（）{
$（'.showme'）.toggleClass（'show_all'）；
});
p{
最大宽度：300px；
线高：1米；
}
.内容{
最大高度：2米；
溢出：隐藏；
显示：内联块；
过渡：最大高度。5s轻松进出；
文本换行：无；
}
.展示给大家看{
最大高度：10公分；
高度：自动；
}
.showme{
不透明度：0；
过渡：不透明度。3秒轻松进出；
}
.让我看看，让大家看看{
不透明度：1；
}

列表：
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。内克，比泰。
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。坐在身体的另一边，以最大限度地保持通透。




切换


列表：
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。内克，比泰。
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。坐在身体的另一边，以最大限度地保持通透。




切换

尝试使用
空白：nowrap？@CodeLover是的，我有。这破坏了我的整个布局，我认为它不起作用尝试将
更改为
@CodeLover这是一个负面的结果 添加填充并具有不同的属性。我使用的是，因为它应该像在父元素中一样添加文本。
标记是内联元素，
标记是块元素。内联元素自然会换行，而块元素不会换行。感谢您的详细解释和提供的示例