iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Modern Web

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

Day23--Bootstrap&CSS文字排版&樣式(1)

  • 對元素設置.text-left可向左對齊。
<p class="p-1 border border-danger text-left">向左對齊</p>

https://ithelp.ithome.com.tw/upload/images/20201008/20129568YQ9Of7STEE.png

  • 對元素設置.text-right可向右對齊。
<p class="p-1 border border-danger text-right">向右對齊</p>

https://ithelp.ithome.com.tw/upload/images/20201008/20129568PZ0R8ukt88.png

  • 對元素設置.text-center可水平居中。
<p class="p-1 border border-danger text-center">水平居中</p>

https://ithelp.ithome.com.tw/upload/images/20201008/201295681zmMZl5w4y.png

  • 對元素設置.text-justify可左右對齊,超過容器寬度的文字會換行。
<p class="p-1 border border-danger text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter 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/20201008/20129568g8q18MgEZ6.png

  • 對元素設置.text-nowrap可讓超出容器寬度的文字不換行(避免使用)。
<p class="p-1 border border-danger text-nowrap" style="width:150px">This text should overflow the parent</p>

https://ithelp.ithome.com.tw/upload/images/20201008/20129568dKQmiDUkcf.png

  • 對元素設置.text-wrap可讓超出容器寬度的文字換行。
<p class="p-1 border border-danger text-wrap" style="width:150px">This text should overflow the parent</p>

https://ithelp.ithome.com.tw/upload/images/20201008/20129568cHRo5P9SWK.png

  • 對元素設置.text-truncate可讓超出容器寬度的文字用...代替(需搭配使用d-inline或d-inline-block)。
<p class="p-1 border border-danger d-inline-block text-truncate" style="width: 150px;">Praeterea iter est quasdam res quas ex communi.</p>

https://ithelp.ithome.com.tw/upload/images/20201008/2012956802JQrue0SZ.png

  • 對元素設置.text-break可讓超出容器寬度的文字換行(防止切斷長英文字)。
<p class="p-1 border border-danger text-break">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter 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/20201008/20129568ygaMfA5zXp.png


上一篇
Day22--Bootstrap Navbar&Dropdown合併使用
下一篇
Day24--Bootstrap&CSS文字排版&樣式(2)
系列文
30天CSS&Bootstrap排版統整30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言