Essayer de transformer un long titre en ellipse sur un design réactif

Je suis de la conception d'un responsive web app, et je tiens à encapsuler un long texte dans le titre avec des points de suspension. Comment puis-je faire cela? C'est un réactif de page (pas de largeur fixe)...

Voici un exemple

Essayer de transformer un long titre en ellipse sur un design réactif

Peut aider quelqu'un?

Edit:

J'ai ajouté un max-width et des points de suspension débordement comme ceci:

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Mais cela ne fonctionne pas pour moi parce que la clé ici est réactivité. Je n'ai pas pour objectif de max-largeur du titre spécialement pour iOS navigateurs mobiles, je veux le max-width pour l'agrandir ou de réduire sur tous les téléphones intelligents. Des suggestions?

source d'informationauteur Jody Heavener

  1. 21

    Qui savait que vous pouvez gérer cela tout de CSS? J'ai été surpris, mais de vérifier la text-overflow de la propriété. L'une des valeurs possibles est des points de suspension! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

    Voir le violon: http://jsfiddle.net/PdRqB/

    Vous devez ajouter trois propriétés pour le titre: 

    .title {
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
    text-overflow: ellipsis; /* to do what you want. */
}

    Un truc sympa, c'est pas les media queries nécessaire. Il est déjà sensible (essayez de redimensionner le volet dans le violon).

    Mise à jour:

    Viens de voir votre mise à jour...
    Votre contenant de l'élément de largeur ne peut être fixée à un pourcentage, même à 100%. Ensuite, overflow: hidden et white-space: nowrap peuvent faire leur magie sur l'enfant à titre d'élément.