CSS pour augmenter la taille du premier mot

Question

Celui-ci m'a un peu stupéfait. Je veux faire le premier mot de tous les paragraphes de mon #content div à 14 pt au lieu de la valeur par défaut pour les paragraphes (12 pt). Y a-t-il un moyen de faire cela en CSS ou est-ce que je suis obligé d'envelopper le premier mot d'une durée pour accomplir cela?

Answer 1

Ce que vous recherchez, c'est un pseudo-élément qui n'existe pas. Il y a: première lettre et: première ligne, mais non: premier mot.

Vous pouvez bien sûr faire cela avec JavaScript. Voici un code que j'ai trouvé qui fait ceci: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

Answer 2

Je ne suis pas d'accord avec Dale ... L'élément fort est en fait le mauvais élément à utiliser, ce qui implique quelque chose à propos de la signification, de l'utilisation ou de l'importance du contenu alors que vous avez simplement l'intention de donner du style à l'élément.

Idéalement, vous pourrez accomplir cela avec une pseudo-classe et votre feuille de style, mais comme cela n’est pas possible, vous devez rendre votre balisage sémantiquement correct et utiliser <span class="first-word"> .

Answer 3

Même chose avec jQuery:

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

ou

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

(Via 'Wizzud' sur la liste de diffusion jQuery )

Answer 4

Solution Pure CSS:

Utilisez la pseudo-classe: de première ligne.

 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.
 

Je n'ai pas testé ça. Je suis sûr que ça marchera bien pour toi. J'ai déjà appliqué des règles de blocage à des pseudo-classes. Vous pourriez être bloqué avec une largeur fixe pour chaque premier mot, donc text-align: center; et lui donner un joli fond ou quelque chose à faire avec l'espace négatif.

J'espère que cela fonctionne pour vous. :)

-Motekye

Answer 5

Vous devez envelopper le mot dans un intervalle pour accomplir cela.