Viết hoa chữ cái đầu tiên của câu CSS

Question

Tôi muốn viết hoa chữ cái đầu tiên của câu, và cũng là chữ cái đầu tiên sau dấu phẩy nếu có thể. Tôi muốn thêm mã ở đây:

.qcont { 
    width: 550px; 
    height: auto; 
    float: right; 
    overflow: hidden; 
    position: relative; 
} 

Answer 1

Bạn có thể viết hoa chữ cái đầu tiên của thành phần .qcont bằng cách sử dụng phần tử giả :first-letter.

.qcont:first-letter{ 
    text-transform: capitalize 
} 

Đây là gần nhất bạn sẽ chỉ sử dụng css. Bạn có thể sử dụng javascript (kết hợp với jQuery) để bọc từng chữ cái xuất hiện sau một dấu chấm (hoặc dấu phẩy, như bạn muốn) trong một số span. Bạn có thể thêm css tương tự như trên vào số span. Hoặc làm điều đó trong javascript tất cả cùng nhau.

Dưới đây là một đoạn mã cho phương pháp css:

.qcont:first-letter { 
 
    text-transform: capitalize 
 
}

<p class="qcont">word, another word</p>

Answer 2

text-transform:capitalize; sẽ tận dụng các chữ cái đầu tiên của một câu, nhưng nếu bạn muốn cũng làm điều đó cho dấu phẩy bạn sẽ phải viết một số javascript. Tôi đồng ý với @BoltClock, mặc dù. Tại sao bạn muốn viết hoa sau dấu phẩy?

Edit: Vì lợi ích của độc giả: text-transform:capitalize; sẽ tận dụng mỗi từ của một câu, chứ không phải chỉ có một đầu tiên. Bạn phải sử dụng bộ chọn CSS :first-letter với phần trên.

Answer 3

Điều này không thể thực hiện được trong CSS. Thuộc tính text-transform không phân biệt theo vị trí của một từ bên trong nội dung và không có phần tử giả để chọn từ đầu tiên của câu. Bạn sẽ cần phải có các yếu tố thực sự, trong đánh dấu, cho mỗi câu. Nhưng nếu bạn có thể làm điều đó, thì bạn có thể cũng thay đổi các chữ cái đầu tiên thành chữ hoa trong nội dung thích hợp.

Viết hoa khi bắt đầu câu là một vấn đề về chỉnh sửa và nên được thực hiện khi tạo nội dung chứ không phải với các đề xuất kiểu dáng tùy chọn (CSS) hoặc với kịch bản phía máy khách. Quá trình nhận ra ranh giới câu là xa tầm thường và không thể được thực hiện tự động mà không cần phân tích cú pháp và ngữ nghĩa phức tạp (ví dụ: viết tắt kết thúc bằng dấu chấm có thể xuất hiện bên trong câu hoặc ở cuối câu).

Answer 4

Nếu bạn cần phải tận dụng các chữ cái đầu tiên trong container contenteditable bạn không thể sử dụng thuộc tính css

#myContentEditableDiv:first-letter { 
    text-transform: capitalize; 
} 

vì khi bạn cố xóa một chữ tự động, bạn sẽ xóa tất cả văn bản chứa trong nội dung có thể chỉnh sửa được.

Hãy thử thay vào ví dụ được cung cấp bởi sakhunzai theo số https://stackoverflow.com/a/7242079/6411398 để có giải pháp làm việc.