Javascript 容器调整大小时自动调整文本区域大小的问题，jquery动画

我想做一张卡片，但我有个问题

问题：

• **当我调整容器大小时，文本会自动调整大小，我不想要它
• 溢出：隐藏和文本溢出：省略号不起作用
• Javascript动画可以工作，但它是从某处复制/粘贴的，我需要重新制作它+如果没有最后的注释代码，代码似乎无法工作。。真奇怪**

$（文档）.ready（函数（）{
$（“.card-background\u background”）。在（“单击”，函数（）上{
如果（$（“.card info”）.css（“宽度”）=“0px”）{
$（“.card info”）.animate({
宽度：“65%”，
}, 600);
$（“.btn i”）.removeClass（）；
美元（“.btn i”）.addClass（“fas fa减”）；
}否则{
$（“.card info”）.animate({
宽度：“0px”，
}, 600);
$（“.btn i”）.removeClass（）；
美元（“.btn i”）.addClass（“fas fa plus”）；
}
});
});
/*document.getElementById（“卡片背景”）addEventListener（“单击”，函数（）{
var container=document.getElementById（“卡信息”）；
if（container.style.display==“无”）{
container.style.display=“block”；
}否则{
container.style.display=“无”；
}
})
/*const imgclick=document.queryselectoral（“.card”）
对于（变量i=0；i

@导入url（'https://fonts.googleapis.com/css2?family=Piazzolla:wght@600&系列=机器人：wght@300&显示=交换'；
*,
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Piazzolla”，无衬线；
}
.集装箱{
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：#F4；
}
.卡片{
宽度：700px；
显示器：flex；
证明内容：中心；
/*高切自由区酒店*/
对齐项目：居中；
}
.hr{
左边距：140像素；
右边距：140px；
高度：3倍；
背景色：#2980b9；
}
/*--------------------------------------左侧------------------------------------------*/
.card-background\u背景{
位置：相对位置；
光标：指针；
宽度：35%；
高度：460px；
背景尺寸：封面；
背景图片：url（“./img/img2.jfif”）；
盒影：-8px 8px 20px rgb（0,0,0,0.15），-8px-8px 20px rgb（0,0,0,0.15）；
}
.img前端{
位置：绝对位置；
宽度：180%；
底部：10%；
左-42%；
z指数：5；
}
/*--------------------------------------右侧------------------------------------------*/
.信用卡信息{
位置：相对位置；
宽度：65%；
高度：480px；
背景色：#FFFFFF；
溢出：隐藏；
盒影：8px 8px 20px rgb（0,0,0,0.15），8px-8px 20px rgb（0,0,0,0.15）；
}
/* ----------------------- */
.card-info_标题{
文本对齐：居中；
颜色：#1b1b1b；
字号：2rem；
字号：200；
填充顶部：30px；
文本转换：大写；
}
.card-info_字幕{
利润率：0.50px 0.50px；
字体大小：300；
字体大小：12px；
颜色：rgb（126126）；
填充底部：30px；
文本对齐：居中；
文本转换：大写；
/*边框底部：1px实心rgba（34,34,34,0.5）*/
}
/* ----------------------- */
.card-info_第二节{
高度：200px；
}
.card-info_文本{
字体系列：“Roboto”，无衬线；
字号：17px；
字号：600；
填充：30px 60px 30px 60px；
颜色：#1b1b1b；
溢出：隐藏；
文本溢出：省略号；
文本对齐：对齐；
}
/* ----------------------- */
.card-info_第三部分{
背景色：#F7FAFC；
位置：绝对位置；
底部：0；
/*高度：43px*/
宽度：100%；
边框顶部：1px实心rgb（216216216）；
}
.card-info_部分{
显示器：flex；
证明内容：周围的空间；
}
.card-info_第p节{
高度：40px；
宽度：30%；
字体系列：“Roboto”，无衬线；
字号：800；
填充：20px 0 20px 0；
颜色：#1b1b1b；
显示器：flex；
对齐项目：居中；
证明内容：中心；
光标：指针；
}
.card-info_第p节：悬停{
边框底部：2个实心#2980b9；
}
/* ----------------------- */
.card-info_媒体{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.图标{
填充顶部：10px；
垫底：20px；
宽度：30px；
利润率：25px 0px 0 10px；
}
.card-info\u github{
显示：无；
/*临时物资*/
}
.btn{
宽度：30px；
高度：30px；
背景色：红色；
}
@介质（最大宽度：1000px）{
.卡片{
弯曲方向：立柱；
}
.card-background\u背景{
高度：200px；
宽度：500px；
}
.img前端{
宽度：80%；
底部-42%；
左-28%；
}
}
@介质（最大宽度：850px）{
.card-background\u背景{
高度：200px；
宽度：400px；
}
.img前端{
宽度：80%；
底部-15%；
左-30%；
}
}
@介质（最大宽度：680px）{
.card-background\u背景{
高度：200px；
宽度：320px；
}
.img前端{
宽度：80%；
底部-15%；
左-30%；
}
}

文件
红猪

Lorem Ipsum只是一个虚拟文本


Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它有
不仅存活了五个世纪，而且飞跃到电子排版，基本上保持不变。

语言
github
试验