css 将文本收缩到表格单元格

hsvhsicv  于 2023-08-09  发布在  其他
关注(0)|答案(4)|浏览(106)

也许这是一个简单的问题,但似乎没有明显的答案。
我有一个固定布局的表格(单元格不能在不破坏整个布局的情况下调整大小),一些单元格内有一些动态文本。如果文本溢出,文本应收缩以适合单元格,而不是被剪裁或换行。
我实际上期望必须是一个很好的CSS解决方案,但我没有找到任何。我真的必须使用JavaScript手动完成吗?
你有什么想法吗?(当然,最好的解决方案是不要把动态文本放在固定的布局表中,但在这种情况下没有办法)。

aiqt4smr

aiqt4smr1#

我不想做那个说“你不行”的人,但今天我必须做那个人。不幸的是,没有办法只使用CSS根据文本字符串的长度动态调整文本的大小。当然,你必须使用JavaScript来解决这个问题。

pxy2qtax

pxy2qtax2#

不同的字体大小在一个表格上看起来会很可怕,如果可以接受的话,用overflow: hidden; text-overflow: ellipsis;剪裁文本,并添加一个工具提示,这样人们就可以看到剪裁的文本

8yparm6h

8yparm6h3#

对于仍然对此感兴趣的人,我编写了一个PHP函数来将文本 Package 在span类中并控制大小。您可以使用$maxLength$divisor变量来使其适合您的表,然后全局应用该函数:

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;
        }
    }

字符串

vngu2lb8

vngu2lb84#

如今(最初的答案是8年前),在文本大小上使用“vw”而不是“px”确实很神奇。将此信息留给将来可能需要此信息的参考。
有关在网页上设置CSS字体大小的详细参考,请阅读this reference site-Backup

相关问题