reactjs 顺风css断字在输入字段中不起作用

s5a0g9ez  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(145)

现在,我的reactjs输入字段如下所示。

正如你所看到的,文本只是一直向前,而不是向下移动到下一行。我该如何解决这个问题呢?这是我的代码输入字段。

<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}/>
guykilcj

guykilcj1#

word-break:break-word更改为break-words

  • tailwind-css中没有类word-break:break-word *

这实际上是textarea而不是text的工作,使用type = "textarea"可以获得所需的结果。

顺风解决方法:

使用divcontenteditable属性,并使用break-words属性

代码:

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

输出:

喜欢:Tailwind Play

相关问题