div固定宽度，当文字过长显示不下时，通过横向挤压不改变字体高度显示完整

haogemr

已于 2023-06-01 14:15:23 修改

阅读量2.7k

点赞数 5

分类专栏：前端文章标签： css

于 2019-12-05 11:25:33 首次发布

本文链接：https://blog.csdn.net/document_dom/article/details/103400534

版权

前端专栏收录该内容

56 篇文章 1 订阅

订阅专栏

问题：当字体大小和div宽度都是固定的情况下，文字过长就会显示不下。

解决办法：通过css3属性tansform: scaleX()，让div横向压缩，呈现出来的就是字体变窄，然后通过调整定位使文字在固定宽度下完整显示。

实现：用两个div嵌套，外层div写固定宽度，内层div宽度先自适应，然后用外层的宽度除以内层的宽度得出要缩放的比例，然后再让内层div偏移（内层div）缩放之前的宽度减去外层div宽度的一半。

文字挤压前：
在这里插入图片描述
文字挤压后：

代码：

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .div1 {
            width: 600px;
            margin: 0 auto;
            overflow: hidden;
        }
        .div2 {
            font-size: 40px;
            white-space: nowrap;
            position: relative;
            float: left;
        }
    </style>
</head>

<body>
    <div id="div1" class="div1">
        <div id="div2" class="div2">固定宽度当文字过长显示不下时，通过横向挤压不改变字体高度显示完整</div>
    </div>

    <script>
        var div2 = document.getElementById('div2');
        var myWidth = div2.clientWidth;
        var proportion = 600 / myWidth;
        var myLeft = (myWidth - 600) / 2;
        div2.style.transform = 'scaleX(' + proportion + ')';
        div2.style.left = '-' + myLeft + 'px';
    </script>
</body>

</html>

haogemr

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
div固定宽度，当文字过长显示不下时，通过横向挤压不改变字体高度显示完整

问题：当字体大小和div宽度都是固定的情况下，文字过长就会显示不下。解决办法：通过css3属性tansform: scaleX()，让div横向压缩，呈现出来的就是字体变窄，然后通过调整定位使文字在固定宽度下完整显示。实现：用两个div嵌套布，外层div写固定宽度，内层div宽度先自适应，然后用外层的宽度除以内层的宽度得出要缩放的比例，然后再让内层div偏移内层div缩放之前的宽度减去外层di...
复制链接

扫一扫