Html 引导卡-从卡中输出的文本

我在4个不同的列中开发了4个引导卡。在每一张卡片中，我创建了一张包含某种类型信息的新卡片

我的问题是，当我缩小屏幕尺寸（响应测试）时，文本会从卡中出来。我的问题是什么？如何解决

谢谢

.cardsZone{
利润率最高：2%；
宽度：80%；
身高：100%；
右边距：自动；
左边距：自动；
}
.我的名片{
背景：#E7EAF180 0%0%无重复填充框；
盒影：0px 3px 20px#bccb47；
边界半径：8px；
边界：无；
身高：100%；
}
.牌组.牌组{
左边距：0px；
}
mysmallCcards先生{
宽度：100%；
背景：#FFFFFF 0%0%无重复填充框；
盒影：0px 3px 20px#bccb47；
边界半径：8px；
边界：无；
边缘顶部：20px；
}
.卡头：第一个子卡{
边界半径：计算（9px-1px）计算（9px-1px）0；
}
.mycardHeader{
背景色：白色；
填充：8px；
}
伊姆格达什先生{
宽度：40px；
高度：40px；
边界半径：8px；
}
.品牌名称{
文本对齐：左对齐；
字体系列：“无衬线”，无衬线；
字体大小：22px；
字母间距：0；
颜色：#4D4F5C；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
线高：0px；
}
.短跑{
文本对齐：左对齐；
字体系列：“无衬线”，无衬线；
字体大小：13px；
字体大小：粗体；
;
字母间距：0；
颜色：#4D4F5C；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
线高：28px；
}
伊姆古斯达什先生{
宽度：24px；
高度：24px；
变换：矩阵（1,0,0,1,0,0）；
边界半径：8px；
}
乌斯达斯先生{
边缘顶部：2倍；
宽度：24px；
高度：24px；
边界半径：8px；
线高：24px；
文本对齐：居中；
背景#4981C226；
字体大小：13px；
字体系列：“无衬线”，无衬线；
字母间距：0；
颜色：#4981C2；
}
.p1{
背景：#EFF0F2 0%0%无重复填充框；
边界半径：4px；
字体大小：13px；
字体系列：“无衬线”，无衬线；
字母间距：0；
颜色：#BCCB；
填充：3px 7px 3px 8px；
文本对齐：居中；
}
杜拉卡奥达什先生{
背景：#D9DAE2 0%0%无重复填充框；
边界半径：4px；
字体大小：13px；
字体系列：“无衬线”，无衬线；
颜色：#BCCB；
}
.卡体{
-ms-flex:1自动；
flex:1自动；
填充：8px；
}

世界环境
测试设置

1.
弹性项目
00:00:00
世界环境
测试设置

1.
弹性项目
00:00:00
世界环境
测试设置

1.
弹性项目
00:00:00
世界环境
测试设置

1.
弹性项目
00:00:00

1）要实现以下包装方式，请将您的

style=“overflow-y:auto；”

从

class=“卡体”

移动到

class=“卡mysmallCcards”

2） 如果您喜欢下面这种包装，请将世界上的

设置

从

span

标记更改为

p

标记，并更改以下内容：

.mysmallCcards{
 width: 100%;
 background: #FFFFFF 0% 0% no-repeat padding-box;
 box-shadow: 0px 3px 20px #BCBCCB47;
 border-radius: 8px;
 border: none;
 margin-top: 20px;

 overflow-y: auto;
 /*overflow-x: hidden;*/
}

.brandName{
 text-align: left;
 font-family: 'Noto Sans', sans-serif;
 font-size: 22px;
 letter-spacing: 0;
 color: #4D4F5C;
 /*white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis;
 line-height: 0px;*/
}

---

首先-文本从卡片中消失，因为卡片的

宽度是自动的，并且不适合其内容，因为卡片的
宽度更宽

第二-很难理解你想要实现什么。但你可以坚持这一策略：


将所有硬编码的
style=“overflow-y:auto；”“
从
divs
和类
卡体中删除

添加
溢出：自动css

加

结果以全屏模式查看代码段并更改屏幕大小


.cardsZone{
利润率最高：2%；
宽度：80%；
身高：100%；
右边距：自动；
左边距：自动；
}
.我的名片{
背景：#E7EAF180 0%0%无重复填充框；
盒影：0px 3px 20px#bccb47；
边界半径：8px；
边界：无；
身高：100%；
溢出：自动；
}
.myCards>.card主体{
最小宽度：f
.myCards > .card-body {
  min-width: fit-content;
}