Capitalize first word in each line of text

Question

In a paragraph where words are wrapped to the next line due to word break, what could be a way to capitalize the first word of each line?

Two line example:
Lorem ipsum and
Prometheus

Four line example:
Lorem
Ipsum
And
Prometheus

I know about the ::first-letter , ::first-line selectors but none would be suitable for this case.

Answer 1

You can convert the text so each word is in its own span , then check the position of each span every time the page resizes.

This may not perform well, so you would likely want to debounce the resize.

To make use of ::first-letter the element must be a block-level element, which span , by default, is not. So it must be display:inline-block .

This doesn't handle 'break-word' as OPs samples do not include that as an example and break-word is deprecated.

 // wrap each word in a span $("p").each(function() { $(this).html($(this).text().split(" ").map(t => "<span>" + t + "</span>").join(" ")); }); // determine what is "left" (it's not 0) var farLeft = $("p").position().left; // add a class to each "left" element and let css handle the rest function firstLetter() { $(".farleft").removeClass("farleft"); $("p>span").each(function() { if ($(this).position().left == farLeft) { $(this).addClass("farleft"); } }) } $(window).on("resize", firstLetter); firstLetter();

 p>span { display:inline-block; }.farleft::first-letter { text-transform: uppercase; font-weight:bold; } /* these are just for the demo so it's easier to see what's going on */ p { width: 50% }.farleft { background-color: pink; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Answer 2

With current CSS it's impossible to capitalize the first word of each wrapped line, so we'll have to use JavaScript.
Here is a modern JS solution as opposed to relying on something like jQuery (Updated on mousemove for this example which I don't recommend for performance):

 document.querySelectorAll("p").forEach((paragraph) => wordsToSpans(paragraph)) document.onmousemove = updateLeftmostSpans updateLeftmostSpans() function wordsToSpans(element) { element.innerHTML = element.innerText.split(" ").map(word => `<span>${word}</span>`).join(" ") } function updateLeftmostSpans() { document.querySelectorAll("p").forEach((paragraph) => { paragraph.querySelectorAll("span").forEach((word) => { word.classList.remove("leftmost") if (word.getBoundingClientRect().left == paragraph.getBoundingClientRect().left) word.classList.add("leftmost") }) }) }

 p>span { display: inline block; }.leftmost { text-transform: capitalize; }.resizable { display: grid; place-content: center; width: 16rem; min-width: min-content; height: 9rem; overflow: scroll; resize: both; padding: 1em; background-color: gold; }

 <article class="resizable"> <p>You can resize this example in the bottom right corner to see how capitalisation adapts to the paragraph dimensions.</p> </article>

PS The closest you can get with just CSS is by usingtext-transform to capitalize each word ie text-transform: uppercase;