iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
1
Modern Web

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

Day25--Bootstrap&CSS文字排版&樣式(3)

  • 對元素設置word-wrap:normal可根據瀏覽器預設來拆行(通常是當一單詞超過容器寬度時,保留完整單詞)。
<div class="container" style="width: 200px;">
        <p class="p-1 border border-danger" style="word-wrap:normal;">This is a veryveryveryveryveryveryveryvery long word.</p>
</div>

https://ithelp.ithome.com.tw/upload/images/20201010/20129568q9Cv9fUy2o.png

  • 對元素設置word-wrap:break-word可在一單詞超過容器寬度時,拆分換行該單詞)。
<div class="container" style="width: 200px;">
        <p class="p-1 border border-danger" style="word-wrap:break-word;">This is a veryveryveryveryveryveryveryvery long word.</p>
</div>

https://ithelp.ithome.com.tw/upload/images/20201010/201295683tcaZuGd0x.png


上一篇
Day24--Bootstrap&CSS文字排版&樣式(2)
下一篇
Day26--Bootstrap&CSS文字排版&樣式(4)
系列文
30天CSS&Bootstrap排版統整30

尚未有邦友留言

立即登入留言