使用 text-transform 將 String 字首變大寫 | 點燈坊

傳統若要將 String 字首變大寫，直覺會使用 JavaScript，事實上使用 CSS 即可。

Version

CSS 3

text-transform: capitalize

原始資料為 sam，但最後顯示字首變大寫成 Sam。

<template>
  <div class="title">sam</div>
</template>

<style>
.title {
  text-transform: capitalize;
}
</style>

第 6 行

.title {
  text-transform: capitalize;
}

• text-transform: capitalize：將字首變大寫

Conclusion

• 若 data 的 string 全都小寫，但顯示必須字首變大寫，只要使用 text-transform: capitalize 描述即可

Reference

MDN, text-transform