Comment définir une largeur pour tronquer visuellement le contenu affiché?
j'essaie de définir la largeur d'une colonne d'une table, qui fonctionne très bien jusqu'à ce qu'elle arrive au point où les éléments enfants seraient visuellement tronqués ... alors il ne sera pas plus petit. ("visuellement tronquée"-ce qui ne rentre pas semble être caché derrière la colonne suivante)
voici un exemple de code pour illustrer mon problème:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
var intervalID = null;
function btn_onClick()
{
// keep it simple, only click once
var btn = document.getElementById("btn");
btn.disabled = true;
// start shrinking
intervalID = window.setInterval( "shrinkLeftCell();", 100);
}
function shrinkLeftCell()
{
// get elements
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
// initialize for first pass
if( "undefined" == typeof( td1.originalWidth))
{
td1.originalWidth = td1.offsetWidth;
td1.currentShrinkCount = td1.offsetWidth;
}
// shrink and set width size
td1.currentShrinkCount--;
td1.width = td1.currentShrinkCount; // does nothing if truncating!
// set reporting values in right cell
td2.innerHTML = "Desired Width : ["
+ td1.currentShrinkCount
+ "], Actual : ["
+ td1.offsetWidth + "]";
// Stop shrinking
if( 1 >= td1.currentShrinkCount)
window.clearInterval(intervalID);
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="td1">
Extra_long_filler_text
</td>
<td id="td2">
Desired Width : [----], Actual : [----]
</td>
</tr>
</table>
<button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>
j'ai essayé de régler la largeur de différentes façons, y compris
td1.offsetWidth = td1.currentShrinkCount;
et
td1.width = td1.currentShrinkCount + "px";
et
td1.style.width = td1.currentShrinkCount + "px";
et
td1.style.posWidth = td1.currentShrinkCount;
et
td1.scrollWidth = td1.currentShrinkCount;
et
td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;
et
td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;
et
td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;
je me rends compte, je pourrais probablement utiliser DIV's, mais je préfère ne pas puisque la table est générée à partir d'un contrôle lié, et je ne veux pas vraiment réécrire asp.net contrôles.
cela dit, j'ai pensé que comme dernier effort de fossé, je pourrais au moins envelopper le contenu de chaque ' td1 avec un DIV, et le débordement prendrait soin des choses, mais même remplacer
<td id="td1">
Extra_long_filler_text
</td>
avec
<td id="td1" style="overflow:hidden;">
<div style="margin=0;padding:0;overflow:hidden;">
Extra_long_filler_text
</div>
</td>
n'a pas marché.
est-ce que quelqu'un sait comment régler une largeur pour tronquer visuellement son contenu?
BTW-mon navigateur cible est IE7. Les autres navigateurs ne sont pas important, puisque c'est une application.
5 réponses
j'ai juste essayé d'ajouter table-layout: fixed; au <table> et ça a fonctionné pour moi sur IE7.
dans une disposition de tableau fixe, la disposition horizontale ne dépend que de la largeur de la table, de la largeur des colonnes et non du contenu des cases
Check out la documentation .
CSS Solution
"Tronquer" peut-être pas le mot que vous cherchez. Vous pouvez juste vouloir cacher les caractères débordants. Si tel est le cas, examinez la propriété CSS-"overflow", qui masquera tout contenu dépassant les limites déclarées de son conteneur.
td div.masker {
height:25px;
width:100px;
overflow:hidden;
}
<td>
<div class="masker">
This is a string of sample text that
should be hidden when it reaches out of the bounds of the parent controller.
</div>
</td>
Solution Javascript
si vous voulez effectivement tronquer le texte dans le conteneur, vous devrez supprimer un caractère depuis la droite, testez la largeur du parent, et continuez à supprimer les caractères et à tester la largeur du parent jusqu'à ce que la largeur du parent corresponde à la largeur déclarée.
while (parent.width > desiredWidth) {
remove one char from right-side of child-text
}
<td id="td1" style="overflow-x:hidden;">
devrait être
<td id="td1" style="overflow:hidden;">
overflow-x est un attribut CSS de Microsoft, qui fait maintenant partie de CSS3. Je m'en tiendrais à l'ancienne dépassement de l'attribut.
EDIT:
comme Paolo le mentionne, vous devez aussi ajouter table-layout: fixe; et spécifier la largeur de la table. Un exemple complet de la façon suivante.
<html>
<head>
<style>
table
{
table-layout:fixed;
width:100px;
}
td
{
overflow:hidden;
width:50px;
border-bottom: solid thin;
border-top:solid thin;
border-right:solid thin;
border-left:solid thin;
}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>
autant que je sache, une cellule de table sera toujours étirée pour accommoder son contenu.
avez-vous pensé à utiliser Javascript pour tronquer dynamiquement les données dans les cellules de table qui ont plus qu'une certaine quantité de contenu? Alternativement, vous pouvez faire cela plus facilement côté serveur.
vous pouvez utiliser jQuery ou JavaScript simple pour entourer le contenu de votre(vos) cellule (s) avec des étiquettes div et définir une largeur fixe et débordement:caché sur ceux à la place. Pas beau, mais il avait un travail.
ETA:
<td><div style="width:30px;overflow:hidden">Text goes here</div></td>
puisque le DIV est l'élément limite, c'est là que la largeur doit être réglée.