Discussion :

[monstor]

Bonjour à tous.

Il y a une petite chose que j'aimerai faire mais je ne sais pas si c'est possible et si ça l'est comment le faire.
J'ai un bloc d'une hauteur et largeur fixe et j'aimerai que quand le texte que je met à l'intérieur dépasse, que le texte dépassant ne soit pas affiché et que j'ai "..." à la fin du texte affiché.

J'espère que j'ai été compréhensible!!

Merci par avance!

[Er3van]

Deux possibilités :

- le texte à l'intérieur du div est traitable :

Dans ce cas, en php tu peux faire qq fonctions dessus et générer à la fin les '...'

- tu n'as aucune vision du texte (par exemple une news récuppérée sur un flux RSS via une fonction JS... ) :

Dans ce cas je fais comme ceci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="newsBox">
				<h4>News :</h4>
				<div id="news">
 
				</div>
				...
			</div>

Et en css :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
#newsBox {
	height : 260px ;
	width : 190px ;
	padding-left : 10px ;
	background-color : #000000 ;
}
#news {
	height : 224px ;
	width : 180px ;
	overflow : hidden ;
}

Mais ce n'est qu'un exemple tiré de mon code, ça nécessitera surement des ajustements, et peut-être existe-t-il un autre moyen

[monstor]

Oui, tout simplement, je n'avais pas pensé à englober mon div dans lequel ce trouve mon teste dans un autre et lui enlever son overflow pour rajouter les "..." dans son parent!

Merci beaucoup en tout cas je vais mettre en place tout ça dans l'après-midi !

[monstor]

Le problème c'est qu'en faisant comme ça, j'aurais dans tous les cas les "..." et ce même lorsque mon texte ne dépasse pas le div!

[cedricbaudry.com]

je me suis posé le même problème que toi il y a quelques jours.
soit tu comptes le nombre de caractères que tu veux afficher et s'il dépasse, tu traites l'info comme tu le souhaite, ou alors moi j'ai opté pour une solution comme celle-là

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="texte">mon texte..</div>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.texte {
width: 100px;
max-height: 400px;
overflow: hidden;
}
 
.texte:hover {
overflow: scroll;
}

mais bon, après faut que ça colle avec l'esthétique de ton site web

[monstor]

Merci à tous pour votre aide mais je pense que je en vais pas m'embêter, je vais traiter ma chaine dans ma méthode dans laquelle je vais la chercher pour retourner soit directement la chaine entière si elle n'est pas grande soit alors les n premiers caractères suivis de ...