iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 30

Day30--Bootstrap&CSS文字排版&樣式(8)

  • 對元素設置.text-monospace可將字體轉為等寬體(中文字寬度沒什麼差,英文字有些寬度差很多,可能會造成排版困擾)。
<p class="p-1 border border-danger text-monospace">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

https://ithelp.ithome.com.tw/upload/images/20201015/20129568A3UcVqywA2.png

  • 對元素設置.text-reset可將文字和連結的文字顏色清除(會繼承父元素的文字顏色)。
<div class="text-danger">
    <p class="p-1 border border-danger text-success text-reset">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
</div>

https://ithelp.ithome.com.tw/upload/images/20201015/20129568kSDRIHLSby.png

  • 對元素設置.text-decoration-none可清除文字特效(底線、刪除線等等)。
<div class="p-1 border border-danger">
    <a href="#" class="text-decoration-none">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</a>
</div>

https://ithelp.ithome.com.tw/upload/images/20201015/20129568OtyXFZibJn.png


上一篇
Day29--Bootstrap&CSS文字排版&樣式(7)
系列文
30天CSS&Bootstrap排版統整30

尚未有邦友留言

立即登入留言