Break single line to multi line as content increases

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…

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        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;
            margin: 100px ;

    <div class="main-wrapper">
        <div class="wrapper">
            <form name="output">
                <input name="textview" type="textview" class="oss" />
        <div class="btn">
            <input type="button" class="bn" value="4" onclick="document.output.textview.value += '4'" />
            <input type="button" class="bn" value="5" onclick="document.output.textview.value += '5'" />
            <input type="button" class="bn" value="6" onclick="document.output.textview.value += '6'" />


which element is the one you are trying to make wrap?

type="textview" isn’t a valid input type. I think you meant to use a textarea element.

<textarea name="textview" class="oss"></textarea>

In this case, the text will wrap to a new line without you having to do anything.

If that element isn’t what you are referring to please add some more information to the question.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.