Css chữ cái đầu tiên của mỗi từ

Khi bạn viết mã, có nhiều cách để viết hoa chữ cái đầu tiên của một từ. Bạn có thể sử dụng CSS cũng như một số phương thức JavaScript

Trong bài viết này, tôi sẽ chỉ cho bạn một cách tiếp cận để đạt được điều này

Để viết hoa chữ cái đầu tiên của một từ với JS, bạn cần hiểu ba phương thức chuỗi. charAt, slice và toUpperCase

Phương thức chuỗi JavaScript charAt

Bạn sử dụng phương thức này để truy xuất ký tự tại một vị trí đã chỉ định trong chuỗi. Sử dụng phương pháp này, chúng ta có thể truy xuất chữ cái đầu tiên trong một từ

const word = "freecodecamp"

const firstLetter = word.charAt(0)
// f

Phương thức chuỗi JavaScript slice

Bạn sử dụng phương pháp này để cắt bỏ một chuỗi con từ toàn bộ chuỗi. Chúng tôi sẽ sử dụng phương pháp này để cắt bỏ phần còn lại của một từ (không bao gồm chữ cái đầu tiên)

const word = "freecodecamp"

const remainingLetters = word.substring(1)
// reecodecamp

Phương thức chuỗi JavaScript toUpperCase

toUpperCase là một phương thức chuỗi trả về phiên bản viết hoa của một chuỗi đã chỉ định. Chúng tôi sẽ sử dụng điều này để viết hoa chữ cái đầu tiên

const firstLetter = "f"

const firstLetterCap = firstLetter.toUpperCase()
// F

Cách viết hoa chữ cái đầu tiên của một từ trong JavaScript

Sử dụng 3 phương thức string trên, ta sẽ lấy ký tự đầu tiên của từ, viết hoa nó, sau đó nối nó với phần được cắt còn lại

Cách tiếp cận này sẽ dẫn đến một từ mới có chữ cái đầu tiên được viết hoa

Đây là mã cho nó

const word = "freecodecamp"

const firstLetter = word.charAt(0)

const firstLetterCap = firstLetter.toUpperCase()

const remainingLetters = word.slice(1)

const capitalizedWord = firstLetterCap + remainingLetters
// Freecodecamp
// F is capitalized

Phiên bản ngắn cho đoạn mã trên là

const word = "freecodecamp"

const capitalized =
  word.charAt(0).toUpperCase()
  + word.slice(1)
  
// Freecodecamp
// F is capitalized

Cảm ơn bạn đã đọc và chúc bạn mã hóa vui vẻ

QUẢNG CÁO

QUẢNG CÁO

Dillion Megida

Người ủng hộ nhà phát triển và Người tạo nội dung đam mê chia sẻ kiến ​​thức của tôi về Công nghệ. Tôi đơn giản hóa JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / v.v. Kênh YT của tôi. youtube. com/c/deeecode

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a tag. You can style that first letter as you would a real element with:

p::first-letter {
  font-weight: bold;
  color: red;
}

The first letter is bold and red

Kết quả là như thể bạn có một yếu tố giả xung quanh chữ cái đầu tiên

  The first letter is bold and red.

T chữ cái đầu tiên được in đậm và có màu đỏ

• Phần tử giả chỉ hoạt động nếu phần tử cha là hộp chứa khối (nói cách khác, nó không hoạt động trên chữ cái đầu tiên của phần tử display: inline;. )
• Nếu bạn có cả ::first-letter và ::first-line trên một phần tử, chữ cái đầu tiên sẽ kế thừa từ các kiểu dòng đầu tiên, nhưng các kiểu trên ::first-letter sẽ ghi đè khi các kiểu xung đột
• Nếu bạn tạo nội dung bằng ::before, chữ cái đầu tiên hoặc ký tự dấu chấm câu, cho dù đó là một phần của nút văn bản gốc hay được tạo bằng nội dung được tạo, sẽ là mục tiêu

Thêm thông tin

• Khi sử dụng cho chữ hoa đầu dòng, hãy sử dụng kết hợp với p:first-of-type để không phải chữ cái đầu tiên nào cũng được tạo kiểu
• Bút mẫu – với nội dung được tạo
• Wiki W3C

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

Di động / Máy tính bảng

Ghi chú. Đối với Internet Explorer 8 trở xuống, hãy sử dụng dấu hai chấm _______6_______0 thay vì ký hiệu dấu hai chấm

Tôi có thể sử dụng chữ cái đầu tiên của CSS không?

Là gì. chữ cái đầu tiên trong CSS?