Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS

Question

How to convert UPPERCASE letter to lowercase and first letter Uppercase for each sentences like below only by using CSS    From  THIS IS AN EXAMPLE SENTENCE   To  This is an example sentence   Update  When I m using text-transform  capitalize  The result still same

User · Answer

I know the OP is asking for a CSS-only solution. But in case anyone landing here from the Magic Google ends up requiring a JavaScript solution, here's a one-liner:

capitalize = str => str[0].toUpperCase() + str.substr(1);

e.g.:

capitalize('foo bar baz'); // -> 'Foo bar baz'

User · Answer

If use this on capitalized text   p text-transform  lowercase   Then show the text  it is lowercase but if you copy that lower-cased text  and paste it  it change back to original capitalized

User · Answer

If you want to use for  lt input gt  it will not work  for  lt input gt  or text area you need to use Javascript   lt script language  javascript  type  text javascript  gt  function capitaliseName         var str   document getElementById  name   value      document getElementById  name   value   str charAt 0  toUpperCase     str slice 1       lt  script gt    lt textarea name  NAME  id  name  onkeydown    capitaliseName    gt  lt  textarea gt    that is supposed to work well for  lt input gt  or  lt textarea gt

User · Answer

Use mixins   x000D   x000D   mixin sentence-case     x000D    text-transform  lowercase  x000D     amp  first-letter   x000D      text-transform  uppercase  x000D      x000D    x000D   x000D     USAGE  x000D   title   x000D     include sentence-case    x000D    x000D   x000D   x000D

User · Answer

can simply use style inside element   lt p style  text-transform  lowercase   gt HI I AM NEW HERE lt  p gt

User · Answer

convert element s textContent to lowercase with JS    el textContent   el textContent toLowerCase      then just use css    text-transform  capitalize

User · Answer

Simple   text-transform  capitalize

User · Answer

Just Simply use   use css code    text-transform  uppercase

User · Answer

If you can make all characters lowercase on the server than you can apply   text-transform  capitalize   I don t think text-transform will work with uppercase letters as the input

User · Answer

There is no sentence caps option in CSS  The other answers suggesting text-transform  capitalize are incorrect as that option capitalizes each word   Here s a crude way to accomplish it if you only want the first letter of each element to be uppercase  but it s definitely nowhere near actual sentence caps   p       text-transform  lowercase     p first-letter       text-transform  uppercase       lt p gt THIS IS AN EXAMPLE SENTENCE  lt  p gt   lt p gt THIS IS ANOTHER EXAMPLE SENTENCE     AND THIS IS ANOTHER  BUT IT WILL BE ENTIRELY LOWERCASE  lt  p gt

User · Answer

You will not be able to capitalize the first word of each sentence with CSS   CSS offers text-transform for capitalization  but it only supports capitalize  uppercase and lowercase  None of these will do what you want  You can make use of the selector  first-letter  which will apply any style to the first letter of an element - but not of the subsequent ones   p       text-transform  lowercase    p first-letter       text-transform  capitalize       lt p gt SAMPLE TEXT  SOME SENTENCE  SOMETHING ELSE lt  p gt   lt  -- will become this  Sample text  some sentence  something else  -- gt    That is not what you want  and  first-letter is not cross-browser compatible    IE again   The only way to do what you want is with a kind of programming language  serverside or clientside   like Javascript or PHP  In PHP you have the ucwords function  documented here   which just like CSS capitalizes each letter of each word  but doing some programming magic  check out the comments of the documentation for references   you are able to achieve capitalization of each first letter of each sentence   The easier solution and you might not want to do PHP is using Javascript  Check out the following page - Capital Letters - for a full blown Javascript example of doing exactly what you want  The Javascript is pretty short and does the capitalization with some String manipulation - you will have no problem adjusting the capitalize-sentences js to your needs   In any case  Capitalization should usually be done in the content itself not via Javascript or markup languages  Consider cleaning up your content  your texts  with other means  Microsoft Word for example has built in functions to do just what you want

User · Answer

You can t do that purely with CSS  There is a text-transform attribute  but it only accepts none  capitalize  uppercase  lowercase and inherit   You might want to look into either a JS solution or a server-side solution for that

[html] Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS

Examples related to html

Examples related to css