Making first letter of each sentence uppercase

Question

I am struggling to make this work. In my HTML markup i have paragraphs with several sentences. Its only the new paragraphs that begin with a capital letter. But what I want is that multiple sentences begin with a capital first word in the same paragraph.

Is there a way to achieve this without js? i have tried the following mixin:

@mixin sentence-case() {
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

and I want to say apply it to a class with paragraphs, and that each sentence in that paragraph also gets to be uppercase.

thanks

Possible duplicate: https://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css — pjones235, Dec 22 '17 at 16:02

Brett DeWoody · Accepted Answer · 2017-12-22T16:04:19.787

Appears to be due to using SCSS syntax when it looks like you might be talking about SASS (based on the question tag).

In SASS, the mixin would be defined as:

-sentence-case()
  text-transform: lowercase

  :first-letter
    text-transform: uppercase


.sentenceCase
  +sentence-case()

In SCSS, the mixin would be defined as:

@mixin sentence-case() {
  text-transform: lowercase;

  &:first-letter {
    text-transform: uppercase;
  }
}

.sentenceCase {
  @include sentence-case();
}

And in either case you would then assign the .sentenceCase class to an element with:

<p class="sentenceCase"></div>

Which results in:

.sentenceCase {
  text-transform: lowercase;
}
.sentenceCase:first-letter {
  text-transform: uppercase;
}

<p class="sentenceCase">
our first sentance
</p>

<p class="sentenceCase">
our second first sentance
</p>

However, the added requirement of every first letter in each sentence should be capitalized is not doable with this mixin. There is currently no CSS selector to select each first letter in a sentence.

I am using scss syntax. But if I want each word in a sentence to begin with a capital letter, that would mean that each sentence has to be a paragraph? If there is currently no CSS selector to select each first letter in a sentence. — user2371684, Dec 22 '17 at 17:10
That is correct. There is currently no CSS selector to select each first letter in a sentence. You would probably need to use JavaScript to do a regex match, or break each sentence into a `` to make use of the `:first-letter` selector. — Brett DeWoody, Dec 22 '17 at 21:28

Making first letter of each sentence uppercase

1 Answers1