Question

这个让我有点难过。我想在14pt的#content div中创建所有段落的第一个单词，而不是段落的默认值（12pt）。有没有办法在直接CSS中执行此操作，或者我是否在一个范围内包装第一个单词来完成此操作？

Answer 1

您正在寻找的是一个不存在的伪元素。有：第一个字母和：第一行，但没有：第一个字。

您当然可以使用JavaScript执行此操作。以下是我发现的一些代码：http://www.dynamicsitesolutions.com/javascript/first-word-selector/

Answer 2

我必须不同意Dale ......强大的元素实际上是使用的错误元素，暗示了内容的含义，使用或强调，而您只是想为元素提供样式。

理想情况下，您可以使用伪类和样式表来完成此操作，但由于这是不可能的，因此您应该使标记在语义上正确并使用。

Answer 3

同样的事情，使用jQuery：

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
  });

或

$('#links a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

（通过jQuery Mailing List上的'Wizzud'）

Answer 4

可悲的是，即使使用CSS 3，我们仍然没有使用纯CSS的:first-word :last-word等。值得庆幸的是，现在几乎所有的JavaScript都能引起我的推荐。使用nthEverything和jQuery，您可以从传统的Pseudo元素扩展。

目前有效的Pseudos是：

:first-child
:first-of-type
:only-child
:last-child
:last-of-type
:only-of-type
:nth-child
:nth-of-type
:nth-last-child
:nth-last-of-type

使用nth Everything我们可以将其扩展为：

::first-letter
::first-line
::first-word
::last-letter
::last-line
::last-word
::nth-letter
::nth-line
::nth-word
::nth-last-letter
::nth-last-line
::nth-last-word

Answer 5

纯CSS解决方案：

使用：first-line伪类。

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

没有测试过。很确定它会对你很好。我之前已经将块规则应用于伪类。对于每个第一个单词，您可能会遇到固定宽度，所以text-align：center;并给它一个很好的背景或处理负面空间的事情。

希望对你有用。：）

-Motekye

Answer 6

你必须在一个范围内包装这个词来实现这个目标。

Answer 7

使用strong元素，这是它的目的：

<div id="content">
    <p><strong>First Word</strong> rest of paragraph.</p>
</div>

然后在样式表中为它创建一个样式。

#content p strong
{
    font-size: 14pt;
}

Answer 8

这里有一些JavaScript和jQuery，我把每个段落的第一个单词用标记包起来。

$(function() {
    $('#content p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

然后，您可以使用CSS为.firstWord创建样式。

它并不完美，因为它没有考虑到每种类型的空白;但是，我确信通过一些调整，它可以完成你所追求的目标。

请记住，此代码仅在页面加载后执行，因此可能需要一瞬间才能看到效果。

Answer 9

对此没有简单的CSS方法。你可能不得不使用JavaScript + Regex来扩展。

理想情况下，第一个单词会有一个伪元素，但是你运气不好，因为这似乎不起作用。我们有：第一个字母和：第一行。

您可以使用以下组合：after或：before来获取它而不使用span。

Answer 10

在段落文本中插入跨度标记。例如- HelloMy Name Is Dot</p 然后设置第一个字母的样式。

Answer 11

明智的孩子们。一开始是单词＃〜。这是第一个字，“用空白包围的不间断的字符串（中文或其他）。

没有第一个单词伪元素的说明？ b 明智的孩子。首先＃〜是coreservice的pidgeonCRUSHfoundation的一个戳。隔离第一个单词，然后“欺骗”一下，您的整个操作系统就会破裂并消失吗？那么，假想的<< z> b >>标签反向压缩又如何呢？ up！还没有第一句话。 :-(确实，到目前为止，这实际上是基础。在OS-inside-an-OS中，它最终会以某种方式使它惊恐。请考虑一下。

从饮食学上来说，机器不能吃东西。到目前为止，我的评论是这里唯一的机器地址。请提供更多现实。

Answer 12

使用HTML + CSS的简单方法：

TEXT A <b>text b</b>

<h1>text b</h1>

<style>
    h1 { /* the css style */}
    h1:before {content:"text A (p.e.first word) with different style";    
    display:"inline";/* the different css style */}
</style>

CSS增加第一个单词的大小

12 个答案: