如何使用 javascript 仅设置第一行文本的样式答案

【问题标题】：How do I style only the first line of text using javascript如何使用 javascript 仅设置第一行文本的样式
【发布时间】：2016-09-22 19:02:19
【问题描述】：

我希望能够为仅在第一行的文本设置样式。假设我有类似的东西

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

我只希望第一行和第一行的样式像使用文本转换大写一样。我知道有 css psudocode 可以做到这一点。

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

但我的教授希望看到它使用 javascript 来完成。谁能帮我解决这个问题？

【问题讨论】：

“我知道有 css psudocode 可以做到这一点。但是我的教授希望看到它使用 javascript 来完成。”厚颜无耻的答案是通过 JS 应用 CSS 规则。 :-p
请分享您的代码
我很想看看你的教授认为它是如何用 JavaScript 完成的。如果他这样做了，那么调整浏览器窗口的大小，看看它是否仍然有效。
那是一位讨厌的教授
可能的线索。 Finding Line Wraps

标签： javascript html css

【解决方案1】：

您可以在段落的第一行周围添加一个 id 为“firstLine”的 span 标签...

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

然后在您的 Javascript 中，创建一个以跨 id 为目标的变量（“doc”），然后您可以将新变量（“doc”）的 css 样式更改为大写。

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

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

希望这会有所帮助。

【讨论】：