css - 超出容器最大高度和宽度的文本
问题描述
桌面:
移动设备:
你好我有一个问题我的文本超过了我的最大高度我希望我的容器跟随高度并且我的文本具有我的容器的最大宽度我的文本
代码:
<div className="App">
<div class="wrapper">
<div className="text">
<div class="card-info">
<div class="card-about">
<a class="card-tag tag-news">NEWS</a>
<div class="card-time">6/11/2018</div>
</div>
</div>
<h3 className="textxd">dasssssssssssssssss</h3>
<p className="textxd">
aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu
dasuhduashu aaaaaaaaaaaaa da aaaaaaaaaaaaa dasuhdasudhu dasuhduashu
aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu
dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashusuhdasudhu
dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu
</p>
</div>
</div>
</div>
CSS:
.App {
padding: 20px;
font-family: sans-serif;
text-align: center;
background: red;
height: 40vh;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 30vh;
max-height: 30vh;
border-radius: 10px;
cursor: pointer;
background:blue;
}
.textxd {
margin-top: 10px;
margin-bottom: 5px;
}
.text {
height: 100%;
max-height: 30vh;
padding: 0.15rem 1.25rem;
color: white;
transition: all 0.3s ease-in;
${({ isHover }) =>
isHover &&
`
color:black;
transition: all 0.3s ease-in;
`}
}
.card-about {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
}
.card-tag {
width: 60px;
max-width: 100px;
padding: 0.2rem 0.5rem;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background: #ffab00;
color: #fff;
}
.card-info {
position: relative;
}
我不知道如何解决这个问题我需要留下我的容器和响应文本,我的容器遵循文本的高度或文本具有最大高度
解决方案
如果您希望类包装器具有相同的高度,请使用溢出:滚动。像这样 -->
.wrapper { ... overflow : scroll; }
或否则使用高度:自动;
.wrapper { ... height : auto; }
推荐阅读
- asp.net-core - Kendo UI:网格和面板栏
- sql - 查找所有关联计数为零和非零的记录
- c# - 等效于 ASP.NET Core 1.1 中的 BindPropertyAttribute
- java - 如何根据字符串的索引打印一个字母?
- python - Django / 模型图像字段要求默认图像
- powershell - 如何使用 AD 找到没有读取权限的文件夹所有者?
- triggers - 删除用户的zabbix触发器
- javascript - 未处理的拒绝 (TypeError): {(intermediate value)}.filter 不是函数
- java - JFreeChart 正在绘制数据但不绘制线性回归
- c# - 如何在没有 x5c 的情况下从 jwks 验证 JWT 的签名