Quelqu'un sait comment utiliser CSS text-overflow sur un texte qui s'enroule?

quelqu'un sait comment utiliser {text-overflow: ellipsis;} sur un morceau de texte qui est le retour à une deuxième ligne?

L'ajout de {whitespace: nowrap;} fait fonctionner text-overflow, mais j'ai besoin du texte pour envelopper donc je ne peux vraiment pas l'utiliser.

19
demandé sur Andrew Philpott 2010-03-06 00:32:45

2 réponses

je suis assez sûr que ce que vous essayez de faire est impossible, dans un pur CSS solution. Toutefois, il existe un moyen de hacker ensemble un résultat similaire. Voici ce que j'ai fait:

http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication

voir le fondu sur le bloc de texte présentant chaque cours? Cela a été fait en limitant d'abord le débordement de la manière habituelle, puis en plaçant un autre div au - dessus de la dernière ligne et mise en œuvre de la perte d'efficacité dans la CSS. Au lieu d'un fondu, vous pouvez également insérer une ellipse ou un autre indice visuel.

donc, pas exactement le résoudre comme vous le voulez, mais atteindre un résultat similaire à L'interface utilisateur pour s'assurer que l'utilisateur est conscient que le contenu est tronqué. Personnellement, je pense que c'est très joli :-)

2
répondu Ari Maniatis 2012-03-05 00:46:29

Si vous connaissez le contenu va envelopper de deux lignes à chaque fois que cette solution fonctionne. Utilisez ::after et contenu:'..."; puis placez le curseur sur le coin inférieur droit de votre type (qui devrait être un élément de niveau bloc). Cela ne fonctionnera que si vous travaillez avec une couleur de fond solide car vous avez besoin de définir le fond du ::after match.

Le seul inconvénient, c'est le peu de paramètres, ce peut être un succès et le fait qu'il va couper un caractère en deux si les choses ne s'alignent pas correctement (ce qui ne sera probablement pas le cas).

2
répondu Jason Reed 2012-05-14 00:46:55