Break single line to multi line as content increases

HTML-CSS
1

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">

<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>
    <style>
        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 ;
        }
    </style>
</head>

<body>
    <div class="main-wrapper">
        <div class="wrapper">
            <form name="output">
                <input name="textview" type="textview" class="oss" />
            </form>
        </div>
        <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'" />
        </div>
    </div>
</body>

</html>
2

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

3

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.

4

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