Ne peut pas obtenir “text-overflow: ellipsis;” au travail
Je ne peux pas obtenir "text-overflow: ellipsis;" au travail...
Peut-être que quelqu'un peut donner ma un peu d'aide avec celui-là 🙂
Petit exemple:
http://jsfiddle.net/qKS8p/2/
http balisage:
<table class="" border="1">
<tr><td colspan=3>…</td></tr>
<tr class="">
<td width="90"><span class="prose">column one</span></td>
<td width="20"><span class="prose">column two</span></td>
<td width="90"><span class="prose">column three</span></td>
</tr>
<tr><td colspan=3>…</td></tr>
</table>
de style css règles:
.prose {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
Je en droit d'attendre de la colonne "deux" à être coupée à cause de la td largeur de 20px. J'ai aussi essayé différentes variantes, avec des divs, tds, etc, mais je ne vois aucun changement. Notez que cela ne fonctionne pas dans n'importe quel navigateur j'ai vérifié. Il est certainement quelque chose me manque.
Il y a des millions de pages sur les exemples, les différences de navigateurs et de et de et de. Mais je ne peux pas obtenir que cela fonctionne ! Selon les informations actuelles de la simple text-overflow attribut est pris en charge dans tous les principaux navigateurs maintenant. Donc, je suis à la recherche d'un pur css solution (pas xul, pas de plugin jquery), depuis ce devrait travail.
Grâce,
arkascha
Vous devez vous connecter pour publier un commentaire.
Le problème avec le code de l'exemple est que les tables automatiquement agrandir et d'ignorer l'ensemble de la largeur de 20px si il n'y a plus de contenu puis 20px.
Voici un exemple qui fonctionne: http://jsfiddle.net/qKS8p/34/
J'ai ajouté:
Ce violon qui fonctionne pour moi: http://jsfiddle.net/wRruP/3/
HTML
### CSS
Il semble que
text-overflow
doit être réglée sur le bloc qui est en fait le fait de contraindre la largeur du texte.<span>
est un élément inline qui n'ont pas vraiment de largeur et ne peut donc pas vraiment coupé du texte, et quand je imbriquée un<p>
, il n'a pas hérité de la propriété.Essayer de régler à la fois la
text-overflow
de la propriété et de la largeur fixe sur le même bloc au niveau de l'élément (comme undiv
), comme ceci:Avec l'original de votre CSS: