css实现两行变一行 |好看的css js动画效果

.two-lines{
display: flex;
flex-wrap: wrap;
}
.two-lines span{
flex-basis: 100%;
}

首先，大家给需要变成一行的两段文本外围加一个class名为”two-lines”的div标签。

接下来，在CSS样式表中，大家使用flex布局，并将flex-wrap属性值设置成wrap。这样，当两段文本超出div的宽度时，就会自动折行成两行。

最后，大家再给两段文本加上一个span标签，并设置其flex-basis属性值为100%，表示该元素占满整行宽度。这样，两行文本就会自动变成一行了！