如何在不更改文本区域本身大小的情况下转换文本区域文本值的大小？

问题描述

我使用Java脚本通过“ transform scale（）”更改文本区域的文本值的宽度和高度 但是问题是当高度和宽度改变时，文本区域的大小也改变了。 我想保持文本区域的大小不变。 我在CSS中为文本区域设置了宽度和高度，并使用resize：none，但所有这些都无法正常工作。

var doubletallValue,doublewideValue;
doubletall.onclick = function() {
        doubletallValue = document.getElementById("doubletall").checked;
        if (doubletallValue == 0 && doublewideValue == 0) {
            document.getElementById("usertext").style.transform = "scale(1.0,1.0)";
        } else if (doubletallValue == 1 && doublewideValue == 0) {
            document.getElementById("usertext").style.transform = "scale(1.0,2.0)";
        } else if (doubletallValue == 0 && doublewideValue == 1) {
            document.getElementById("usertext").style.transform = "scale(2.0,1.0)";
        } else if (doubletallValue == 1 && doublewideValue == 1) {
            document.getElementById("usertext").style.transform = "scale(2.0,2.0)";
        }
    }

    doublewide.onclick = function() {
        doublewideValue = document.getElementById("doublewide").checked;
        if (doubletallValue == 0 && doublewideValue == 0) {
            document.getElementById("usertext").style.transform = "scale(1.0,2.0)";
        }
    }

 .checkboxes {
        float: left;
        margin-left: 20px;
        font-size: 25px;
    }
    
    .check {
        transform: scale(1.5);
        cursor: pointer;
    }
    
    .doubletall {
        transform: scale(1.0,1.5);
        transform-origin: center center;
        margin-top: 5px;
        margin-bottom: 17px;
    }
    
    .doublewide {
        transform: scale(1.5,1.0);
        transform-origin: left center;
    }
    
    label {
        cursor: pointer;
        display: inline-block;
        margin-bottom: 10px;
    }
    
    .inputtext {
        float: right;
        resize: none;
    }
    
    .usertext {
        font-size: 25px;
        border: solid;
        white-space: nowrap;
        width: 600px;
        height: 200px;
        overflow: scroll;
        resize: none;
    }

 <div class="checkboxes">

                <input type="checkbox" class="check" id="doubletall">
                <label for="doubletall" class="doubletall">Double tall</label><br>

                <input type="checkbox" class="check" id="doublewide">
                <label for="doublewide" class="doublewide">Double wide</label><br>
            </div>

            <div class="inputtext">
                <textarea class="usertext" id="usertext" placeholder="Type text here"></textarea>
            </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）