打印元素双精度的第一个单词[重复]答案

【问题标题】：Print first word of element double [duplicate]打印元素双精度的第一个单词[重复]
【发布时间】：2014-07-26 14:07:07
【问题描述】：

我怎样才能从 print 中获得一些众所周知的东西：获取元素的第一个单词（p、h1、h2 或其他东西），复制它并设置不同的样式（在我的例子中，给它一些偏移量和另一种颜色，所以两个词重叠）？是否有一种纯 CSS 的方式来执行此操作，或者可能与 jQuery 或类似的方式一起使用？

由于是CMS驱动的，没有办法手动插入一个span之类的世界，当然也会影响SEO...

提前致谢！

【问题讨论】：

第一个单词还是第一个字母？因为你可以用 css 做一个::first-letter。
两个词重叠看起来你可以只将第一个词包装在某个元素中并使用text-shadow设置样式。
CSS 只支持首字母和首行。第一个单词需要 JS（非常麻烦），或者如果您使用的是 WordPress 之类的东西，请插入内容并使用正则表达式提取第一个单词并将其包装在 span 标签中。
你可以使用这个：stackoverflow.com/questions/5458605/first-word-selector
其实，text-shadow 的想法很简单，但是我没有想到，所以如果元素是一个单独的元素就可以了。它在一定程度上起到了作用，非常感谢。

标签： jquery html css text

【解决方案1】：

这是一个纯 JavaScript 解决方案。它确实增加了一个跨度，但这对 SEO 的影响小于复制一个单词（这可能被标记为黑帽做法，因为您正在复制可以被屏幕阅读器阅读的内容）

JSfiddle

HTML：

<p id="paragraph">This is a sentence</p>

Javascript：

// grabs the #paragraph element
var string = document.getElementById('paragraph');

//grabs the content of the #paragraph element
var stringContent = string.innerHTML;

//pushes the string content into an array
var stringArray = stringContent.split(" ");

//wraps the first word in a span
stringArray[0] = '<span class="first-word">' + stringArray[0] + '</span>';

//pushes the array back into stringContent
stringContent = stringArray.join(' ');

//pushes stringContent back into your html
string.innerHTML = stringContent;

【讨论】：

这可以解决问题，谢谢