Vue中宽度固定，font-size根据内容进行缩放处理设置

最新推荐文章于 2025-01-22 13:53:33 发布

原创最新推荐文章于 2025-01-22 13:53:33 发布 · 2.7w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

CSS 专栏收录该内容

24 篇文章

订阅专栏

这个博客展示了一个使用Vue.js实现的文字自适应缩放的实例。通过计算每个文字块的宽度与父元素宽度的比例，应用CSS的transform属性进行缩放，确保文字在指定宽度内完整显示。代码中涉及到了Vue的实例、$refs引用、CSS样式调整以及DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JS/vue.js"></script>
</head>
<body>
    <div id="root">
            <div v-for="(item, index) in sliderNas" :key="index" class="a">
                <!-- {{item}} -->
                <span :ref="`txtRef-${index}`" :style="`${styleFormate(index)}`" class="b">{{item}}</span>
            </div>
    </div>

    <script>
        new Vue({
            el: '#root',
            data:{
                sliderNas:[
                    '明天要投产啊啊，还没改完！怎么办！哈哈！',
                    '投产数据1',
                    '测试数据是用于投产的数据加以测试明天要上班',
                    
                ]
            },
            methods: {
                styleFormate(index) {
                    this.$nextTick(() => {
                        const refObj = `txtRef-${index}`;
                        const dom = (this.$refs[refObj]); // js可直接使用：this.$refs[refObj]
                        const width = dom[0].offsetWidth;

                        const parentWidth = 111;
                        console.log(width)
                        const mulNum = parentWidth / width;
                        console.log(mulNum)
                        if (mulNum < 1) {
                            const num = Math.floor(mulNum*100) / 100;
                            const style = `transform: scale(${num});font-size: 16px;display: inline-block;transform-origin: left center;`;
                            console.log(style)
                            dom[0].style = style;
                        }
                    });
                }
            }
        })
    </script>
    <style>
        .a{
            width: 111px;
            height: 138px;
            background-color: aquamarine;
            margin-bottom: 20px;
        }
        .b{
            white-space: nowrap;
            padding: 8px 6px;
        }
    </style>
</body>
</html>