Question

我需要更改每个单词的每个首字母的大小，颜色和重量。我不是在谈论每个首字母大写。我的意思是目标第一个字母，并根据我的选择应用风格。：Click Here to see example about which i am talking.

Answer 1

不幸的是，这不能用CSS完成，但是这里有一个JavaScript解决方案，可以帮助你实现这个目标：

<强> CSS ：

.first-letter {
    color: red;
}

<强> HTML ：

<p class="each-word">First letter of every word is now red!</p>

<强>的JavaScript ：

window.onload = function(){
  var elements = document.getElementsByClassName("each-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}

Answer 2

您应该使用标签将每个单词包裹起来，并使用::first-letter CSS选择器。

此外，请注意，此选择器不适用于嵌入式元素。如果要将其与内联元素（例如<span>）一起使用，请确保设置display:inline-block（有关更多详细信息，请参见此处：https://stackoverflow.com/a/7631782/11298742）

示例：

p span { display: inline-block; font-family: 'Roboto', sans-serif }
p span::first-letter {
    color: red;
    font-weight: bold;
}

<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>

Answer 3

AFAIK要实现这一点，你必须在单独的标签中写下第一个字母，如标签或 div 或 p 标签并将css应用于这个标签并将其他字母放在普通标签

中

<强>更新：根据你的评论，如果你从文本字段中获得句子，你将不得不制作一个循环遍历所有单词的Javascript，并在substr的帮助下找到每个单词的第一个字符并通过将其放入标签并保持休息来appy css标签外的字母然后用原始文本替换最终输出

定位css中每个单词的首字母

3 个答案: