Versuch, langen Titel in Ellipsen auf Responsive Design zu drehen

Question

Ich entwerfe eine responsive Web-App, und ich würde gerne lange Text im Titel mit einer Ellipse kapseln. Wie kann ich das machen? Es ist eine ansprechende Seite (keine feste Breite) ...

Hier ist ein Beispiel

Kann jemand helfen?

Edit:

Ich habe eine max-width und ein Auslassungszeichen Überlauf wie folgt aus:

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

Aber das wird für mich nicht, weil hier der Schlüssel Ansprechbarkeit ist. Ich möchte die maximale Breite des Titels nicht speziell für mobile iOS-Browser festlegen. Ich möchte, dass die maximale Breite auf allen Smartphones vergrößert oder verkleinert wird. Irgendwelche Vorschläge?

Answer 1

Wer wusste, dass Sie mit CSS umgehen können? Ich war überrascht, aber überprüfen Sie die text-overflow Eigenschaft. Einer der möglichen Werte ist Ellipse! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Siehe Geige: http://jsfiddle.net/PdRqB/

Sie müssen drei Eigenschaften auf den Titel hinzuzufügen:

.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. */ 
} 

Ein cooler Teil ist, keine Medien-Anfragen erforderlich. Es reagiert bereits (versuchen Sie die Größe der Scheibe in der Geige).

Update:

Sie Ihre Update sieht ... Ihr enthält Breite des Elements kann auf einen Prozentsatz festgelegt werden, sogar 100%. Dann können overflow: hidden und white-space: nowrap ihre Magie auf dem Kind-Titel-Element tun.