문장의 첫 글자를 대문자로 표기하십시오. CSS

Question

가능한 경우 문장의 첫 글자와 쉼표 뒤에 첫 글자를 대문자로 나타내려고합니다.

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

Answer 1

의사 요소 :first-letter을 사용하여 .qcont 요소의 첫 번째 문자를 대문자로 변환 할 수 있습니다.

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

이것은 CSS 만 사용하면 가장 가까이에 있습니다. span에 마침표 (또는 원하는대로 쉼표) 뒤에 나오는 각 문자를 줄 바꿈하기 위해 jQuery와 함께 javascript를 사용할 수 있습니다. 위와 동일한 CSS를 span에 추가 할 수 있습니다. 아니면 자바 스크립트에서 함께 할. 여기

는 CSS 방식에 대한 미리보기 : 당신이의 contentEditable 컨테이너의 첫 글자를 대문자로해야하는 경우

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

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

Answer 2

text-transform:capitalize;가 문장의 첫 글자를 대문자로하지만, 당신이 원하는 경우 또한 일부 자바 스크립트를 작성해야합니다 쉼표를 위해 그것을 할 : 여기에 코드를 추가합니다. 그래도 @BoltClock에 동의합니다. 왜 지구상에 쉼표를 붙이시겠습니까?

편집 : 독자를 위해서 : text-transform:capitalize;이 문장의 각 단어,뿐만 아니라 첫 번째를 활용합니다. 위와 함께 CSS 선택 도구 :first-letter을 사용해야합니다.

Answer 3

이것은 CSS에서 수행 할 수 없습니다. text-transform 속성은 내용 내부에 단어를 배치하는 것에 따라 구별을하지 않으며 문장의 첫 번째 단어를 선택하기위한 의사 요소가 없습니다. 각 문장마다 실제 요소를 마크 업해야합니다. 하지만 그렇게 할 수 있다면 초기 글자를 내용의 대문자로 바꿀 수 있습니다.

문장의 시작 부분의 대문자 사용은 맞춤법의 문제이며 선택형 문체 제안 (CSS)이나 클라이언트 측 스크립팅이 아닌 콘텐츠 생성시 완료되어야합니다. 문장 경계를 인식하는 과정은 사소한 것이 아니며 일반적으로 복잡한 구문 및 의미 분석 (예 : 문장으로 끝나는 약어는 문장 내 또는 문장 끝에 나타날 수 있음)없이 자동으로 수행 할 수 없습니다.

Answer 4

당신이 CSS 속성을 사용할 수 없습니다

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

문자를 자동으로 삭제하려고하면 contenteditable에 포함 된 모든 텍스트가 삭제되기 때문입니다.

대신 작업 솔루션에 대해 https://stackoverflow.com/a/7242079/6411398에서 sakhunzai가 제공 한 예제를 시도해보십시오.