CSS增加第一个单词的大小

同样的事情,使用jQuery:

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

要么

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

(通过jQuery邮件列表中的 'Wizzud' )

遗憾的是,即使使用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

纯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

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