我想在帶有類的“p”標簽中以不同方式格式化文本。“br”有一個換行符，下面的文本應該采用不同的格式。有沒有 css 的解決方案？
下面是代碼示例。
待辦事項：格式 ${getDate(loadStoredTasks())}" 不同于 ${zaehlerRechner(loadStoredTasks())}
<div class="list-task-responsible">
<img src="img/energy-consumption_light.png"/>
<p class="list-task-notes">${zaehlerRechner(loadStoredTasks())} <br>
${getDate(loadStoredTasks())}</p>
</div>
800,10 千瓦時：正確
17.11.2022 - 20.11.2022：應該有其他格式（應該看起來像：17.11.2022 - 20.11.2022）
uj5u.com熱心網友回復：
您可以將第二行包裝在它自己的元素中，例如
.list-task-notes {
font: 2rem/1 system-ui;
}
.list-task-notes small {
font-size: 50%;
}<p class="list-task-notes">
800,10 kWh<br>
<small>17.11.2022 – 20.11.2022</small>
</p>或者您可以使用::first-line偽選擇器來更改第一行的格式。
.list-task-notes {
font: 1rem/1.5 system-ui;
}
.list-task-notes::first-line {
font-size: 200%;
}<p class="list-task-notes">
800,10 kWh<br>
17.11.2022 – 20.11.2022
</p>uj5u.com熱心網友回復：
像這樣？但是 ::first-line 只對第一行有效，就像它命名的那樣
.list-task-notes{
font-weight: normal;
}
.list-task-notes::first-line {
font-weight: bold;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
uj5u.com熱心網友回復：
你可以試試div p::first-line{ /*Some styling here*/ }
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/535707.html
下一篇：在物件陣列中按鍵獲取值