iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  
  • 對元素設置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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言