Bonjour à tous, voilà mon problème semble tout simple mais n'étant pas un expert HTML/CSS je ne sais pas comment faire.
J'ai un bloc de texte dont je récupère les données via un webservice, le texte en gras étant le titre et tout en bas, la description. Je souhaite que le bloc garde la même taille quelque soit le texte contenu à l'intérieur, donc dans ce cas j'aimerais restreindre le titre et la description en n'affichant que 3 lignes puis des pointillés par exemple. Y a-t-il un moyen de le faire via HTML/CSS ou dois-je passer par du JS ? Si oui vous me conseillez quoi ?

http://www.hapshack.com/images/HpIJ0.png

Merci pour votre aide
En CSS, tu peux rendre "invisible" ce qui dépasse de ton bloc à l'aide de "overflow:hidden"

Sinon il te faudra utiliser JS (notamment pour les "...")
Modifié par kenor (02 Feb 2015 - 18:31)
Si tu veux que le bloc garde la même taille, un simple CSS : width ou min-width / max-width fera l'affaire.

Sinon après je dirais qu'à l'heure du responsive web, et de toute façon le web en général, tu ne peux pas prévoir comment cela sera affiché chez "les autres" et donc limité le nombre de ligne est un peu difficile (tout dépends aussi du contenu).

Ou alors, il faut restreindre en nombre de caractères (regex) et faire un bouton "lire la suite" par exemple via du JS.
Modifié par MagicCarpet (02 Feb 2015 - 18:35)
Bonjour, je débute, donc c'est peut-être une mauvaise idée, la voici :

Faire trois blocs :
Le premier d'une taille fixe ne permettant de rentrer que 3 lignes ;
Le second tout petit avec trois points de suspension dedans, et une valeur pour les bordures hautes et basses "hidden" (pour masquer les bordures des blocs du haut et du bas) ;
Enfin un troisième pour insérer le reste du texte.

Du coup, il faut générer deux scripts pour récupérer les données du webservice (un pout le titre et un pour la description).
Si c'est faisable, cela devrait fonctionner.