Break single line to multi line as content increases inside textview-CodePudding

How can I break the line when content start overflowing it , break it into two lines then three line without using css grid ..like we do in CSS GRID using

grid-template-rows: minmax(120px, auto);

then in the css we use

word-wrap: break-word;
word-break: break-all;

Main code which need to be improved.. without using css grid

 body {
            background-color: #444;
        }

        .main-wrapper {
            height: 500px;
            width: 500px;
            margin: 50px auto;
            border: 2px solid #222;
        }

        .oss {
            border: 1px solid red;
            height: auto;
            margin: 100px;
        }
        .btn{
            margin: 100px ;
        }

 <body>
    <div >
        <div >
            <form name="output">
                <input name="textview" type="textview"  />
            </form>
        </div>
        <div >
            <input type="button"  value="4" onclick="document.output.textview.value  = '4'" />
            <input type="button"  value="5" onclick="document.output.textview.value  = '5'" />
            <input type="button"  value="6" onclick="document.output.textview.value  = '6'" />
        </div>
    </div>
</body>

CodePudding user response：

Use <textarea> instead of <input/>. To auto-resize textarea use scrollHeight in event input and use if to set max-height. min-height you can set in css for .oss like this

 .oss {
    .......
    min-height:50px;
 }

let textarea = document.querySelector("textarea");

 textarea.addEventListener('input', autoResize, false);
      
function autoResize() {
  if(this.scrollHeight < 100){
    this.style.height = 'auto';
    this.style.height = this.scrollHeight   'px';
  }
}

body {
            background-color: #444;
        }

        .main-wrapper {
            height: 500px;
            width: 500px;
            margin: 50px auto;
            border: 2px solid #222;
        }

        .oss {
            border: 1px solid red;
            height: auto;
            margin: 100px;
            overflow:hidden;
            min-height:50px;
        }
        .btn{
            margin: 100px ;
        }

<body>
    <div >
        <div >
            <form name="output">
                <textarea name="textview" type="textview"  /></textarea>
            </form>
        </div>
        <div >
            <input type="button"  value="4" onclick="document.output.textview.value  = '4'" />
            <input type="button"  value="5" onclick="document.output.textview.value  = '5'" />
            <input type="button"  value="6" onclick="document.output.textview.value  = '6'" />
        </div>
    </div>
</body>