Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices!

I have come across similar questions but they do not cover the issue of multiple sentences.

Original Text:

THIS IS THE FIRST SENTENCE. And this is the second, as it is from the server.

Desired output:

This is the first sentence. And this is the second...

I attempted using the following CSS, but it only applies to the first letter and does not work with multiple sentences:

 p { text-transform: lowercase;}
   p:first-letter {text-transform:capitalize}
htmlsentencecss

Answer №1

It appears that this issue is best resolved using jQuery. Take a look at the following solution for properly capitalizing the entire element, and then extracting the first sentence with code like this:

let content = $('#my_paragraph').html();
let firstSentence = content.substring(0, content.indexOf('.'));
firstSentence = capitalizeFirstLetter(firstSentence);
let remainingText = content.substring(content.indexOf('.') + 1);
$('#my_paragraph').html(firstSentence + remainingText);

Answer №2

This is just a temporary solution. If the output changes in any way, such as including more than one dot or words starting with capital letters, this code will not work correctly.

Example: http://jsfiddle.net/Em2bE/

// capture your text
var initialText = $('p').text();

// extract the first sentence and convert it to lowercase
var firstSentence = initialText.substr(0, initialText.indexOf('.')).toLowerCase();

// capitalize the first letter
var updatedText = initialText.charAt(0).toUpperCase() + firstSentence.substring(1);

// add the modified text to any element you choose and include the missing period.
$('.result').text(updatedText + '.');

Answer №3

One idea that springs to mind is incorporating some jQuery. Locate the initial period (.) within the paragraph, then transform the text preceding it into lowercase (you could assign it a span with specific styling defined in a CSS file). Research may be necessary to fine-tune this process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is a method to raise the height when scrolling down without reducing it when scrolling up?

For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up. Currently, I am utilizing JQuery with the code snippet below: $(function(){ $(window).scroll(function() { ...

javascriptjquerycss

Refresh the page when the dropdown selection is changed and send the new value

I'm currently working on a page that includes a dropdown menu. My goal is to have the page reload after selecting an option from the dropdown so that it returns to the same page with the selected value passed through. Here's the PHP code for th ...

phphtmldrop-down-menu

What is the best way to include an active item within an li tag inside a div container?

Here is the structure for a widget that I have, and I want to add the active class to the li. I've tried doing this but it's not working and I'm unsure where the issue lies. var selector = '#recent-posts-5'; var url = window. ...

htmljquery

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

javascripthtmlangulartypescript

The table is not displaying the CSS class as intended

I need to modify the behavior of a table so that upon clicking on a value, a specific class is set and the user is redirected to a particular page. The structure of the table is as follows: <?php // Determine the file name based on content type if( ...

phphtmlcss

Setting intervals to change background images resulted in a delay

I've been working on creating an animation that switches between 2 images used as the background image of a div. Here's the code snippet I've been using: var spacecraftInterval = setInterval(function() { if (access == true) { var image ...

javascripthtmljquerycssbrowser

Adjust the color of the text in Ionic based on the condition

My current solution involves highlighting text in a small slider after a user tap, but it feels very makeshift. <ion-slide *ngFor="let loopValue of values"> <div *ngIf="viewValue == loopValue"> <b> {{loopValue}} </b> ...

cssangularionic-frameworkionic3

Is there a way to make Chrome ask to save a password within an HTML form?

I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...

html

How can I use HTML and jQuery to send a button click event to a .py file using AJAX and cgi in web development?

I have encountered a challenge with posting data from button clicks on an HTML page to Python CGI for insertion into a PostgreSQL database. My script seems to be struggling with this task. Here is the structure of my HTML, ajax, and javascript: '&ap ...

javascriptjquerypythonhtmlajax

extra elements within the 'navbar-toggler' icon button

How to create a navbar with multiple menu items that are always visible? Some items will be shown upon clicking the navbar button, while others will remain steady. Using the bootstrap navbar-toggler button can make the navbar longer when adding more items ...

htmlcssbootstrap-4

Error: The URL specified in /accounts/detail could not be found

I encountered an error with the message "NoReverseMatch at /accounts/detail - Reverse for 'upload' with arguments '()' and keyword arguments '{}' not found. 1 pattern(s) tried: [u'accounts/upload/(?P\d+)/$']". T ...

pythonhtmldjango

Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one. As I compile my scss, this piece of code: .foo { ... &__bar { ... } } transforms into the expected output below: .foo { ... } .foo__bar { ... } However, I actually need it t ...

csswebpacksass

Ways to assign a boolean value to HTML using Angular?

Can someone help me set the initial value of showProduct to false for the app-product HTML selector? showProduct:boolean = false; <button (click)="showProduct=!showProduct">Show Product</button> <div *ngIf="!showProduct"> <app-p ...

htmlangulartypescriptboolean

Detecting User Interaction with Email Link

On my webpage, there is a link that when clicked, opens the default Email client. I also want to track in my database if the user has clicked on this link or not. Since this interaction occurs at the client-side, I am wondering if there is a way to check ...

javascripthtmlajaxanchormailto

Activate the Twitter Bootstrap Lightbox when the page is loaded

Is there a way to make my twitter bootstrap lightbox automatically trigger when the HTML page loads? Currently, I have this script in my 'main.js' file: function lightbox(){ $('#myLightbox').lightbox(); }; I heard that I can us ...

htmlcsszend-frameworktwitter-bootstraplightbox

Discovering all invalid elements in an Angular 8 Form using Typescript by revealing required fields post button click

Once the button is clicked, I want to retrieve all invalid elements in the Form and showcase those fields that are either incomplete or required. ...

htmlangulartypescriptforms

Utilizing Google Maps to display an infowindow upon clicking a location from a geojson file

I want to implement info windows that pop up when markers on a map are clicked. I used the sample code provided by Google (below) to create a marker map from geojson files dragged and dropped into the window. My goal is for the info windows to show text ta ...

javascripthtmlgoogle-maps

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

pythonhtmlflaskflask-wtforms

various stunning galleries accessible from a single page of thumbnail images

I'm trying to create a unique gallery experience on my website. I have a set of 6 images, each featuring a different house. What I want is for each image, when clicked, to open up a fancybox gallery showcasing 4 more detailed photos of the same house. ...

javascriptjqueryhtmlfancybox-2

Unable to Click on Selenium Element

When a link is clicked on a website, the URL remains unchanged but a popup appears on the screen containing elements that can only be accessed after running driver.switchTo().defaultContent(). To access these elements, I have used a javascript executor com ...

javascripthtmlselenium