Réduire le texte dans une cellule de tableau

Question

C'est peut-être une question facile, mais il ne semble pas y avoir de réponse évidente.

J'ai un tableau avec une mise en page fixe (les cellules ne peuvent pas être redimensionnées sans que la mise en page ne soit modifiée) et du texte dynamique dans certaines cellules. Si le texte déborde, il doit être rétréci pour tenir dans la cellule, au lieu d'être coupé ou enveloppé.

Je m'attendais en fait à ce qu'il y ait une bonne solution CSS, mais je n'en ai pas trouvé. Dois-je vraiment le faire manuellement en utilisant JavaScript ?

Une idée ? (La meilleure solution serait de ne pas mettre de texte dynamique à l'intérieur d'un tableau à mise en page fixe, bien sûr, mais dans ce cas, il n'y a pas d'autre solution).

Answer 1

Je déteste être le gars qui dit "tu ne peux pas", mais aujourd'hui je vais devoir être ce gars. Malheureusement, il n'existe aucun moyen de dimensionner dynamiquement un texte en fonction de la longueur de la chaîne de caractères en utilisant uniquement les CSS. Vous devrez certainement résoudre ce problème en utilisant JavaScript.

Answer 2

Des tailles de police différentes sur un tableau vont avoir un aspect horrible, si c'est acceptable, découpez le texte avec overflow: hidden; text-overflow: ellipsis; et ajoutez une info-bulle pour que les gens puissent voir le texte coupé.

Answer 3

Pour ceux qui sont encore intéressés, j'ai écrit une fonction PHP pour envelopper le texte dans une classe span et contrôler la taille. Vous pouvez jouer avec la fonction $maxLength y $divisor pour l'adapter à votre tableau, puis appliquer la fonction de manière globale :

    function ShrinkText($text)
    {
        $maxLength = 20; // The length at which to start shrinking.
        $divisor = 5; // The factor to shrink by

        /*
         * A divisor of 5 with a string of 30 would do the following:
         *
         * $diff = (30 - 20)                                     [10]
         * $multiplier = ($diff / $divisor) * 10     [(10/5)*10 = 20]
         * $percentage = 100 - $multiplier            [100 - 20 = 80]
         * 
         * Output = '<span style="font-size:80%;">' . $text . '</span>'
         *
         */

        if(strlen($text) > $maxLength)
        {
            $diff = (strlen($text) - $maxLength);
            $multiplier = ($diff / $divisor) * 10;
            $percentage = 100 - $multiplier;

            return '<span style="font-size:' . $percentage . '%;">' . $text . '</span>';
        }
        else
        {
            return $text;
        }
    }

Answer 4

De nos jours (la réponse originale date d'il y a 8 ans), l'utilisation de "vw" au lieu de "px" sur la taille du texte fait la magie. J'ai laissé ceci pour des références futures à qui pourrait avoir besoin de cette info.

Pour une référence détaillée sur le réglage de la taille de la police CSS sur les pages Web, veuillez lire le document suivant ce site de référence .