CODEWITHSUNDEEP
cssreactjstailwind-css
jack
jack

Reputation: 97

Tailwind css break-word not working in input field

Now my reactjs input field looked like this. Input field for eventName

As you can see the text just keeps going straight and not moving down to the next line. How do I solve this? Here is my code for this input field.

<input className="bg-slate-50 text-main-blue border border-gray-300 drop-shadow-lg text-sm rounded-md my-5 block w-full p-2.5 whitespace-normal word-break:break-word" type="text" name="eventName" placeholder="Event Name" required onChange={event => setEventName(event.target.value)} value={eventName}/>

Upvotes: 4

Views: 3320

Answers (2)

Absalah9
Absalah9

Reputation: 1

Not sure if you still need help, but incase anyone else needs help with this same issue later on and is hellbent on not using a div like I was, then use textarea to solve this issue. It functions just the same as an input, but the input tag isn't designed to support multi line input, whereas the textarea tag is designed for that.

Upvotes: 0

krishnaacharyaa
krishnaacharyaa

Reputation: 25070

Change word-break:break-word to break-words

There is no class word-break:break-word in tailwind-css

This is actually work of textarea not text, Use type = "textarea" to get the desired result .

Tailwind Work around:

Use contenteditable prop of div and use break-words property

Code:

<div class="m-4 max-w-full overflow-y-hidden break-words border border-solid border-black text-4xl" contenteditable="true"></div>

Output:

enter image description here

Like : Tailwind Play

Upvotes: 4

Related Questions