Overflow et text-overflow dans un h1

Salut à vous,

Si mon titre de niveau 1 (h1) est trop long, je souhaite :
- qu'il continue à ne tenir que sur une seule ligne
- que le surplus de texte soit masqué (grâce au "overflow")
- et pouvoir utiliser "text-overflow: ellipsis" serait un bonus

Je m'inspire de cet article d'Alsacréations mais sans succès. A la fin, on parle de "table-layout: fixed" mais même résultat...

Merci de m'aider grâce à ce codepen : http://codepen.io/anon/pen/hzLDv

salut,
- "qu'il continue à ne tenir que sur une seule ligne" ==> white-space:nowrap
- "que le surplus de texte soit masqué" ==> overflow:hidden
- "et pouvoir utiliser "text-overflow: ellipsis" serait un bonus" ==> text-overflow: ellipsis
Du coup :

h1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

Il me manquait le "white-space: nowrap" mais si tu regardes le codepen, ça ne fonctionne pas.
Je pense qu'il faudrait que je définisse une largeur à mon H1 mais comment faire puisque sa largeur est censée être dynamique.

[edit: oubli d'un mot dans ma réponse]
Modifié par Alphonse (07 Oct 2014 - 14:55)

Il semblerait qu'en définissant un "max-width", le problème résolu ! même si mon "max-width" n'est que de 50px !! c'est un peu surprenant... http://codepen.io/anon/pen/hzLDv