在一个段落中，由于断字，单词被换到下一行，什么方法可以大写每行的第一个单词？两行示例：
普罗米修斯**四线示例：
益普苏姆还有普罗米修斯**我知道::first-letter，::first-line选择器，但没有一个适合这种情况。
::first-letter
::first-line
n6lpvg4x1#
您可以转换文本，使每个单词都在自己的span中，然后在每次调整页面大小时检查每个span的position。这可能无法很好地执行，因此您可能需要debounce调整大小。要使用::first-letter，元素必须是块级元素，而span在默认情况下不是，因此它必须是display:inline-block。这不处理"中断字"，因为OP示例不包括它作为示例，并且不赞成使用break-word。第一个
span
position
debounce
display:inline-block
break-word
lokaqttq2#
使用当前的CSS，不可能大写每个换行的第一个单词，所以我们必须使用JavaScript。这里是一个现代的JS解决方案，而不是依赖于jQuery（在mousemove上更新了这个例子，我不推荐它的性能）：第一个P.S.使用CSS最接近的方法是使用text-transform将每个单词大写，即text-transform: uppercase;
text-transform: uppercase;
2条答案
按热度按时间n6lpvg4x1#
您可以转换文本，使每个单词都在自己的
span中，然后在每次调整页面大小时检查每个span的position。这可能无法很好地执行，因此您可能需要
debounce调整大小。要使用
::first-letter，元素必须是块级元素，而span在默认情况下不是，因此它必须是display:inline-block。这不处理"中断字"，因为OP示例不包括它作为示例，并且不赞成使用
break-word。第一个
lokaqttq2#
使用当前的CSS，不可能大写每个换行的第一个单词，所以我们必须使用JavaScript。
这里是一个现代的JS解决方案，而不是依赖于jQuery（在mousemove上更新了这个例子，我不推荐它的性能）：
第一个
P.S.使用CSS最接近的方法是使用text-transform将每个单词大写，即
text-transform: uppercase;