iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
SideProject30

sideproject-簡易網站系列 第 18

Day-18 探索更多CSS功能

  • 分享至 

  • xImage
  •  

可以用class調整文本內容全部大寫

.text-uppercase {
  text-transform: uppercase;
}

可以調整文本內容全部小寫

.text-lowercase {
  text-transform: lowercase;
}

可以調整文本內容首字母大寫

.text-capitalize {
  text-transform: capitalize;
}

這邊則是可以調整文本內容的邊距及縮排等問題

p {
  margin: 10px; /*四邊都是10px的邊距*/
  margin: 5px 10px 15px 20px; /* 也可以分別設置上、右、下、左的邊距 */
  padding: 20px 10px; /* 上下邊距是 20px,左右邊距是 10px */
}

.first-line-indent {
  text-indent: 2em; /* 首行縮進2em */
}
.overflow-example {
  overflow: hidden; /* 隱藏超出範圍的文字 */
  white-space: nowrap; /* 不換行 */
  text-overflow: ellipsis; /* 用省略號代替 */
}

.whitespace-example {
  white-space: pre; /* 保留空白字符 不會合併 */
}

上一篇
Day-17 持續強化CSS文本觀念
下一篇
Day-19 了解jQuery
系列文
sideproject-簡易網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言