In Word-break: Break-word, I Want To Capitalize The First Word In The Next Line Either Using CSS / JS, Is This Possible?

17 March 2022 - 1 answer

I have a requirement to capitalize the first word of the wrapped sentence (wrapped to the next line due to word break). I know about the first-letter, first-line selectors but none would be suitable for this case. I am stuck, help me!!!

Further Explaination: e.g. in one view it would be
Lorem ipsum and
Prometheus

further scaling down, it should be like this:
Lorem
Ipsum
And
Prometheus

Answer

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>

source: stackoverflow.com

← Previous Post

In Word-break: Break-word, I Want To Capitalize The First Word In The Next Line Either Using CSS / JS, Is This Possible?

17 March 2022 - 1 answer

Answer

Related Questions