CSS来增加第一个字的大小

这一个有我的一种难倒。 我想在14pt的#content div中的所有段落的第一个单词,而不是段落(12pt)的默认值。 有没有办法做到这一点直CSS或我留下一个跨度的第一个字包装来完成这个?

你正在寻找的是一个不存在的伪元素。 有:第一个字母和第一个字母,但不是第一个字母。

你当然可以用JavaScript来做到这一点。 以下是我发现的一些代码: http : //www.dynamicsitesolutions.com/javascript/first-word-selector/

我不得不不同意戴尔…强大的元素实际上是错误的元素使用,意味着内容的含义,使用或强调的东西,而你只是打算提供元素的风格。

理想情况下,您可以使用伪类和样式表来完成此操作,但是由于这是不可能的,因此您应该使标记语义上正确并使用<span class="first-word">

同样的事情,用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邮件列表上的“Wizzud”)

纯CSS解决scheme:

使用: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. */ 

没有testing过。 很确定它会为你工作正常。 之前我已经将伪块规则应用于伪类。 对于每个第一个单词,您可能会被固定宽度卡住,所以text-align:center; 并给它一个很好的背景或东西来处理负面的空间。

希望这对你有用。 🙂

-Motekye

你必须把这个词包装在一个范围内才能做到这一点。

不幸的是,即使是像CSS 3一样,我们仍然没有使用纯CSS的:first-word :last-word等。 谢天谢地,现在几乎所有的JavaScript都带有我的推荐。 使用nthEverything和jQuery你可以从传统的伪元素扩展。

目前有效的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一切,我们可以扩展到:

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

使用强大的元素,这是它的目的:

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

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

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

这里有一些JavaScript和jQuery我扔在一起,用一个<span>标签来包装每个段落的第一个单词。

 $(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创build样式。

这并不完美,因为它没有考虑到任何types的空白。 不过,我相信它可以完成你所做的一些调整。

请记住,这段代码只会在页面加载后执行,所以可能需要一秒钟才能看到效果。

这没有一个简单的CSS方法。 您可能不得不使用JavaScript + Regex来跨度popup。

理想情况下,第一个词会有一个伪元素,但是你运气不好,因为这看起来不起作用。 我们有:第一个字母和第一个字母。

您可以使用:after或之前的组合:无需使用跨度。

在段落文本中插入Span标签。 例如<p><span>Hello</span>My Name Is Dot</p ,然后样式的第一个字母。