iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
Modern Web

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

Day26--Bootstrap&CSS文字排版&樣式(4)

  • 分享至 

  • xImage
  •  
  • 對元素設置white-space:normal可將連續空白字元合併成一個,在超過容器寬度時或碰到<br>標籤時會換行。
<p class="p-1 border border-danger text-justify" style="white-space: normal;">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/20201011/201295688eGTxGWyu5.png

  • 對元素設置white-space:pre可將連續空白字元保留,碰到換行字元或<br>標籤時會換行,效果等同<pre>標籤。
<p class="p-1 border border-danger text-justify" style="white-space: pre;">Ambitioni      dedisse      scripsisse      iudicaretur.<br> 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/20201011/20129568NjNYkJ7GMd.png

  • 對元素設置white-space:nowrap可將連續空白字元合併成一個,只有碰到<br>標籤時會換行。
<p class="p-1 border border-danger text-justify" style="white-space: nowrap;">Ambitioni      dedisse      scripsisse      iudicaretur.<br>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/20201011/20129568GSKBiSjDgq.png

  • 對元素設置white-space:pre-wrap可將連續空白字元保留,在超過容器寬度時或碰到<br>標籤或換行字元時會換行。
<p class="p-1 border border-danger text-justify" style="white-space: pre-wrap;">Ambitioni      dedisse      scripsisse      iudicaretur.<br>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/20201011/20129568noeyswwKCn.png

  • 對元素設置white-space:pre-line可將連續空白字元合併成一個,在超過容器寬度時或碰到<br>標籤或換行字元時會換行。
<p class="p-1 border border-danger text-justify" style="white-space: pre-line;">Ambitioni      dedisse      scripsisse      iudicaretur.<br>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/20201011/20129568MTTpFG9lOU.png


上一篇
Day25--Bootstrap&CSS文字排版&樣式(3)
下一篇
Day27--Bootstrap&CSS文字排版&樣式(5)
系列文
30天CSS&Bootstrap排版統整30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言