CODEWITHSUNDEEP
htmlcss
Authentic Pod
Authentic Pod

Reputation: 21

Input text does not go to next line when it reaches the end

Basically, no matter what I try, the text of my input box keeps continuing in the same line. On top of word-wrap: break-word;, I also used overflow-wrap: break-word;. I included a code snippet so you can see the problem. I looked at previous questions on this issue, but none of them work, so I made a new one. 

.input {
    min-height: 30px;
    height: fit-content;
    width: 100px;
    word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
    <title>Vowel Counter</title>
    <link rel="stylesheet" href="vowelcounter.css">
</head>
<div>
<body>
    <h1>Vowel Counter</h1>
    <input class="input" placeholder="Enter your text">
</body>
</div>
<script src="vowelcounter.js"></script>
</html>

Upvotes: 0

Views: 2986

Answers (2)

Prathamesh Koshti
Prathamesh Koshti

Reputation: 1360

You need textarea not input element.

Do it like this:

<!DOCTYPE html>
<html>
<head>
    <title>Vowel Counter</title>
    <link rel="stylesheet" href="vowelcounter.css">
</head>
<div>
<body>
    <h1>Vowel Counter</h1>
    <textarea class="input" placeholder="Enter your text"></textarea>
</body>
</div>
<script src="vowelcounter.js"></script>
</html>

Upvotes: 3

Arslan Ahmad
Arslan Ahmad

Reputation: 69

You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea></textarea>

Upvotes: 1

Related Questions