0

I want to be able to style text that is only on the first line. Lets say I have something like

<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>

I only want the first line and first of type to be styled like using text-transform uppercase. I know there is css psudocode that can do it. 

p:first-of-type::first-line{text-transform: uppercase;}

But my professor wants to see it being accomplished using javascript. Can anyone help me with this?

Saravanan Kasi
  • 676
  • 6
  • 21
Chris Baker
  • 11
  • 1
  • 3
    "I know there is css psudocode that can do it. But my professor wants to see it being accomplished using javascript." The cheeky answer would be to apply the CSS rules via JS. :-p – ceejayoz Sep 22 '16 at 19:03
  • 2
    share your code please – Saravanan Kasi Sep 22 '16 at 19:03
  • 2
    I'd love to see how your professor thinks it can be done in JavaScript. And if he does, then resize the browser window and see if it still works. – Niet the Dark Absol Sep 22 '16 at 19:05
  • That's one nasty professor – Dennis Novac Sep 22 '16 at 19:10
  • Try using the CSS "visibility:invisible". This preserves the layout very nicely, instead of "display:none". Top of my head, use JS to insert an invisible

    at the top left of the visible one, keep adding words to it until the height changes, and bada-bing!

     – Nate Sep 22 '16 at 19:11
  • Possible duplicate of [Get first word of string](http://stackoverflow.com/questions/18558417/get-first-word-of-string) – Carrie Kendall Sep 22 '16 at 19:17
  • 1
    Possible lead. [Finding Line Wraps](http://stackoverflow.com/questions/3738490/finding-line-wraps) – AA2992 Sep 22 '16 at 19:19

1 Answers1

0

You could add a span tag with an id of "firstLine" around the first line of the paragraph...

<p>  <span id = "firstLine"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </span> 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 </p>

Then in your Javascript, create a variable ("doc") that targets that span id and then you can change the css style of the new variable ("doc") to uppercase. 

var doc = document.getElementById("firstLine");
    doc.style.textTransform = "uppercase";

https://jsfiddle.net/koygwLLw/4/

Hope this helps.

Steven
  • 131
  • 8