Capitalize first letter of sentences CSS

问题

I want to capitalize the first letter of sentences, and also the first letter after commas if possible. I want to add the code in here:

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

回答1:

You can capitalize the first letter of the .qcont element by using the pseudo-element :first-letter.

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

This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span. You could add the same css as above to that span. Or do it in javascript all together.

Here's a snippet for the css approach:

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

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

回答2:

This cannot be done in CSS. The text-transform property makes no distinction according to the placement of a word inside the content, and there is no pseudo-element for selecting the first word of a sentence. You would need to have real elements, in markup, for each sentence. But if you can do that, then you could probably just as well change the initial letters to uppercase in the content proper.

Capitalization at the start of a sentence is a matter of orthography and should be done when generating the content, not with optional stylistic suggestions (CSS) or with client-side scripting. The process of recognizing sentence boundaries is far from trivial and cannot in general be performed automatically without complex syntactic and semantic analysis (e.g., an abbreviation ending with a period may appear inside a sentence or at the end of a sentence).

回答3:

If you need to capitalize the first letter in contenteditable container you can't use the css property

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

because when you try to delete a letter automatically you will delete all the text contained in the contenteditable.

Try instead the example provided by sakhunzai in https://stackoverflow.com/a/7242079/6411398 for a working solution.

回答4:

text-transform:capitalize; ~~will capitalize the first letter of a sentence~~, but if you want to also do it for commas you will have to write some javascript. I agree with @BoltClock, though. Why on earth would you want to capitalize after a comma?

Edit: For the sake of readers: text-transform:capitalize; will capitalize each word of a sentence, not the first one only. You must use the :first-letter CSS selector with the above.

来源：https://stackoverflow.com/questions/11129696/capitalize-first-letter-of-sentences-css

标签

css

capitalization