first letter capital and other are small latter after each dot (.) in div html -
when open in browser show : "this first sentence. second sentence. third sentence. end." , want "this first sentence. second sentence. third sentence. end." capital latter after each dot.
what trying achieve cannot done using css without modifying html. according code, telling css transform first letter of div uppercase, , doing. simple way achieve want following:
<html> <head> <style> span {display: inline-block; text-transform:lowercase} span:first-letter {text-transform:uppercase} </style> </head> <body > <div > <p> <span>this first sentence.</span><span>this second sentence.</span><span>this third sentence.</span><span> end.</span> </p> </div> </body> </html> note cannot apply pseudo-selector :first-letter inline elements, must specify display: inline-block in css. hope helps!
edit: since don't want include tags in html, need use javascript. using jquery , assume following html:
<html> <head> <style> div{text-transform:lowercase} </style> </head> <body > <div id="mydiv"> first sentence. second sentence. third sentence. end. </div> </body> </html> afterwards, insert <script> tag function this:
<script> function sentencecase(input, lowercasebefore) { input = ( input === undefined || input === null ) ? '' : input; if (lowercasebefore) { input = input.tolowercase(); } return input.tostring().replace( /(^|\. *)([a-z])/g, function(match, separator, char) { return separator + char.touppercase(); }); } </script> then, use need assign div content variable follows (include snippet inside <script></script> tag:
var content = $('#mydiv').text(); //you assign 'this first sentence. second sentence. third sentence. end.' content content = sentencecase(content); $('#mydiv').text(content);
Comments
Post a Comment