我需要知道如何使文本随着div float_mask的增长而出现。 现在,当增加div时,文本将在转换结束时放在两行中,因为div如果已经保持原样,则已经达到100%。
.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}
.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}
<div class="floating">
<button type="button" class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>
答案 0 :(得分:2)
简便的方法是在单词之间使用
。
.floating {
display: flex;
align-items: center;
padding: 4px;
justify-content: flex-start;
}
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
}
.mask {
overflow: hidden;
position: relative;
border: 1px solid lightgrey;
height: 54px;
width: 54px;
transition: width 1s;
display: flex;
align-items: center;
transform: translateX(2px);
}
.button:hover + .mask{
width: 200px;
}
.button {
position: absolute;
border: 1px solid lightgrey;
border-radius: 50%;
background-color: white;
padding: 12px;
z-index: 2;
top:17px;
left:17px;
}
}
<div class="floating">
<button type="button" class="button ">
Icon
</button>
<div class="mask">
<div class="container">
<p style="margin: 0;font-size:14px">Message group</p>
<p style="margin: 0;font-size:14px">Message group</p>
</div>
</div>
</div>
答案 1 :(得分:0)
试试这个CSS:
.container {
z-index: 1;
margin-left: 60px;
margin-right: 20px;
position: absolute;
white-space: nowrap;
animation: floatText 5s infinite alternate ease-in-out;
}