CSS增加第一个单词的大小

Question

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

Answer 1

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

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

Answer 2

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

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

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邮件列表中的 'Wizzud' )

Answer 4

遗憾的是,即使使用CSS 3,我们仍然没有:first-word :last-word使用纯CSS 的喜欢等.值得庆幸的是,现在几乎所有的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

你必须在一个范围内包装这个词才能完成这个任务.