我有一個<p>
放在盒子里的元素。結果,單行文本折疊成多行文本。如何垂直分隔多行文本?
<div class="Test1">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="date">8 months ago</span>
<p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
<p>-Andrew M.</p>
</div>
<div class="Test2"><span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="date">2 months ago</span>
<p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
<p>-Kenneth W.</p></div>
<div class="Test3"><span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="date">2 days ago</span>
<p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas magni tenetur ipsum repellendus debitis eveniet excepturi quo veritatis tempora! Fugiat excepturi aperiam ducimus vel asperiores eaque soluta et necessitatibus!</p>
<p>-Regina T.</p></div>
</div>
<style>
.testimonials-container {
margin-top: 3em;
width: 100%;
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.testHeading {
text-align: center ;
margin-top: 2em;
}
.test {
text-align: left;
text-indent: 2em;
}
.checked {
color: orange;
}
.date {
margin-left: 1em;
}
p {
margin: 10px 0;
}
</style>
uj5u.com熱心網友回復:
line-height
在 css 中為您的<p>
標簽使用屬性。
.test {
line-height: 10px; //Or some other value to adjust
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/494781.html