Discussion :

[Robjerey]

Bonjour.

Ci-dessous mon code HTML:

Code HTML :

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

<div id="message" style="color:Red; text-overflow: ellipsis;">Texte très long qui dépasse tout</div>

A l'affichage, j'obtiens le texte en entier "Texte très long qui dépasse tout". Or, je souhaiterai que seulement la partie du texte qui est contenu dans la largeur du bloc s'affiche avec le reste du texte remplacé par des points de suspension, par exemple "Texte très long...".

Pourriez-vous, s'il vous plaît, m'indiquer comment faire?

Merci.

[Bovino]

Par défaut, les dimensions d'une div s'adaptent pour pouvoir afficher le contenu. Pour qu'ellipsis puisse fonctionner, il faut donc contraindre les dimensions (et bien sûr, que le navigateur soit compatible, ce qui n'est pas souvent le cas ).

[Robjerey]

Bonjour.

La largeur de la div est contrainte à 20% (héritée d'un autre fichier .css).
Le texte affiché, quand il arrive au bout de la div, fait un saut de ligne et continue, par exemple:
"Texte très long
qui dépasse tout
au lieu d'avoir des
points de suspension"
Or, je souhaiterais, lorsque le texte affiché arrive au bout de la div, qu'il n'y ait pas de saut de ligne, pour avoir à la place des points de suspension, par exemple:
"Texte très long..."

Est-ce possible à faire?

Merci.

[Bovino]

http://jsfiddle.net/x6vgwthr/

[Robjerey]

Bonjour.

Merci pour la réponse, cela fonctionne, mais partiellement. En effet, il y a bien les points de suspension, mais le texte caché est remplacé par un "grand espace blanc" qui prolonge la largeur de la div.
Ci-dessous mon code HTML:

Code HTML :

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

<div id="message" style="color:Red; width: 10%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background-color: silver;">Texte très long qui dépasse tout au lieu d'avoir des points de suspension</div>

Le résultat obtenu est :
'Texte très long ... <!-- grand espace blanc -->'
Cependant, je souhaiterais qu'il n'y ait pas ce grand espace blanc.

Est-ce faisable?

Merci.

[Bovino]

Cependant, je souhaiterais qu'il n'y ait pas ce grand espace blanc.

Ben... tu voudrais qu'il y ai quoi à la place ?

Le principe lorsque tu masques quelque chose, c'est à priori qu'il ne s'affiche pas, donc là, je vois pas trop ce que tu veux au final...

[Robjerey]

Bonjour.

A la place, je voudrais mettre une infobulle (via l'attribut 'title') qui affichera le contenu du texte qui a été masqué.
Là, actuellement, si le texte fait 5 kilomètres de longueur, alors j'obtiens un espace blanc de 5 kilomètres de largeur qui prolonge la div de cette même largeur et dans le navigateur le menu de droite est alors décalé à 5 kilomètres, rendant la navigation impossible.

Est-ce que cela est possible?

Merci pour votre aide.

[Bovino]

En règle générale, les éléments HTML sont assez disciplinés et ils se placent à l'endroit prévu par le code (que ce soit le tiens ou à défaut, celui imposé par défaut par le navigateur). Donc j'imagine qu'en modifiant ton code, tu devrais pouvoir arranger cela...