css - CSS - 在新行如果文本比block长,就移动span

  显示原文与译文双语对照的内容

我有block组件:


<div class="block">


 <span class="wrapper">


 <span class="title">Title:</span>


 <span class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>


 </span>


</div>




和样式:


.block {


 max-width: 300px;


 background: orange;


 margin: 0 auto;


}



/*NEED TO ASSIGN THIS STYLES IF TEXT IS TOO LONG*/


/* .wrapper {


 display: grid;


 grid-gap: 7px;


} */



.title {


 font-weight: 800;


}



如果文本太长,只使用css,有没有办法指定注释样式?如果span太长,是否有其他方法可以在新行中移动?CodePen:https://codepen.io/carasmo/pen/ZmQQYy

时间:

使用flex wrap:


.block {


 max-width: 300px;


 background: orange;


 margin: 0 auto;


 display: flex;


 flex-flow: row wrap;


}



.title {


 font-weight: 800;


}

<div class="block">


 <span class="title">Title:</span>


 <span class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>


</div>


<br>


<br>


<div class="block">


 <span class="title">Title:</span>


 <span class="text"> Lorem ipsum</span>


</div>

...