桌面:
移动设备:
你好,我的文字超过了我的最大高度我希望我的容器跟随其高度,并且我的文本具有我的容器的最大宽度,我的文本
代码:
<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;
}
我不知道如何解决此问题,我需要离开容器和响应文本,使我的容器遵循文本的高度或文本具有最大高度
height
auto
@media only screen and (max-width: 600px) {
.wrapper {
height: auto;
max-height: auto;
}
}
.App {
padding: 20px;
font-family: sans-serif;
text-align: center;
background: red;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 10px;
cursor: pointer;
background:blue;
}
.textxd {
margin-top: 10px;
margin-bottom: 5px;
}
.text {
height:auto;
max-width:100px;
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;
}
<div class="App">
<div class="wrapper">
<div class="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>