CSS mot de points de suspension ('...') après une ou deux lignes
Je suis en train de créer un mot-enveloppez-les dans du JavaScript à l'aide de CSS, et la condition est:
Si DIV contient un très mot long, comme "asdasfljashglajksgkjasghklajsghl", je veux afficher:
|asdasfljashglajk...|
Si DIV contient une longue phrase, comme "si j'avais un centime pour chaque fois que j'ai été dit que je ne peux pas", je veux afficher:
|if i had a dime for|
|everytime i was... |
Je travaille avec HTML, CSS, JavaScript. Je ne peux pas utiliser jQuery.
S'il vous plaît laissez-moi savoir si c'est possible.
Pouvez-vous définir ce que "à long terme" et "longue peine" signifie pour vous exactement? (Un certain nombre de caractères, une certaine largeur...)
double possible de Croix navigateurs mult-lignes de débordement de texte avec des points de suspension ajoutée au sein d'une largeur&hauteur fixe div?
double possible de Croix navigateurs mult-lignes de débordement de texte avec des points de suspension ajoutée au sein d'une largeur&hauteur fixe div?
OriginalL'auteur user349072 | 2012-07-26
Vous devez vous connecter pour publier un commentaire.
Pour cela, vous pouvez utiliser
text-overflow: ellipsis;
de la propriété. Écrire comme celaLe deuxième cas n'est pas simple avec css, voir stackoverflow.com/questions/3404508/...
oui pour plusieurs lignes,javascript est la solution
merci, j'ai réussi à créer les points de suspension pour 2 lignes, et j'ai réussi à créer pour une seule ligne. est-il un moyen, avec JS ou html, css, pour obtenir à la fois? je veux dire, si il y a un mot long(la longueur peut être réglée) puis "..." s'affiche dans la même ligne, et si il y a beaucoup de mots, les "..." apparaît dans la deuxième ligne? merci encore
peut-être également besoin overflow: hidden, dans certains cas.
OriginalL'auteur Prashobh
Je sais que je suis un peu en retard à la réponse, mais j'ai juste écrit une pice de code que des complices:
et bien sûr, vous devez enregistrer le sélecteur jQuery dans une variable afin de ne pas interroger les DOM à chaque fois.
OriginalL'auteur alecs.popa
Trouvé ceci:
http://codepen.io/martinwolf/pen/qlFdp
Ressemble
-webkit-line-clamp
œuvres dans certains navigateurs.OriginalL'auteur Mouscellaneous
Malheureusement, avec les CSS seul, je ne pense pas que vous le pouvez.
http://jsfiddle.net/TVVHs/
text-overflow: ellipsis;
seulement fonctionne avecwhite-space: nowrap;
qui empêche plusieurs lignes.Il y a probablement un fou javascript solution qui maintient hacher off mots jusqu'à ce que la hauteur d'élément est acceptable, mais ce sera lent et sacrément hacky méchant.
OriginalL'auteur Alex Wayne
lorsque vous serez autorisé à utiliser jQuery vous avez pu voir le dotdotdot plugin à ce lien.. très simple à utiliser et il fonctionne très bien!
Pour le moment, je peux vous suggérer de jeter un oeil à ce violon! devait travailler le
text-overflow: ellipsis
OriginalL'auteur user2274431
Après de bidouiller avec le CSS pour arriver à une "meilleure" CSS SEULE solution, je suis venu avec cette:
Ce serait toujours supposons que vous disposez d'au moins 3 lignes de texte, et il ya un couple de problèmes avec elle. Si le dernier mot pour envelopper sur la ligne 4 est très long, il y aurait un exceptionnellement grand espace entre le dernier mot et les points de suspension. De même, il pourrait se chevauchent, le dernier mot si c'était quelque chose de très, très petites, comme "un".
Vous pouvez ajouter un autre récipient et avoir les points de suspension à l'extérieur de la
p
, et avec un peu de commentaire de peaufinage, je suis sûr que quelqu'un va tripoter quelque chose de mieux.OriginalL'auteur TbWill4321
Espère que cela répond à votre question
http://codepen.io/martinwolf/pen/qlFdp
http://caniuse.com/#search=-webkit-line-clamp
OriginalL'auteur Julian Tellez
Si vous pouvez garantir le contenu sera écrasé, voici la solution que j'ai est venu. Il fonctionne pour mon site et je voulais garder les choses simples.
html:
css:
Vous pouvez ensuite jouer avec le rembourrage et le dégradé d'arrière-plan pour obtenir un plus élégant présentation.
OriginalL'auteur Ryan Walton