eleement en overflow.

Bonjour, j'aimerais remplacer un span en elpsis.

1
2
3
4

<div class="wsp_infos" style="width:80%;...">
<span id="1" style="float:left" class="sub-heading headling-category"><a href="/">TITLE</a> - </span>
<span id="2" style="float:left" class="sub-heading headling-workspace"><a href="/x">subtitle</a></span>
</div>

voilà ma span#2 est dans la zone de overflow (ma div fais 80% du conteneur et span#1 fait environ 10% mais span#2 90% _{au pif}) dans l'espace restant je voudrais indiquer à l'user que span#2 est caché pas "…" (ou autres) ma div est sur une seul ligne (height = 20px;) j'aimerais bien une solution full css… merci.

Je penses que tu peux utiliser ce code.

1
2
3

span#2 {
    text-overflow: ellipsis;
}

Plus d'info sur text-overflow.

en gros actuellement j'ai

1
2
3
4
5
6
7
8

<div>
<span>
mon titre 1 - 
</span>
<span width:50%>
mon titre 2 pas visible 
<span>
</div>

http://codepen.io/darkiron/pen/zqWoWd comme ça presque mais avec à la fin "…"

Et avec after et content : https://developer.mozilla.org/fr/docs/Web/CSS/:after ?

Pour que text-overflow fonctionne, il faut plusieurs choses sur l'élément :

• white-space: nowrap pour forcer le texte à rester sur une seule ligne
• overflow: hidden pour cacher tout ce qui dépasse