Слово Tailwind css не работает в поле ввода

Теперь мое поле ввода 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}/>

css reactjs tailwind-css

03.01.2023 05:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изменить `word-break:break-word` на `break-words`

В tailwind-css нет класса word-break:break-word

На самом деле это работа textarea, а не text. Используйте type = "textarea", чтобы получить желаемый результат.

Попутный ветер

Используйте contenteditable опору div и используйте свойство 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

03.01.2023 07:05

Другие вопросы по теме

Как обрабатывать 404 на react-router-dom v6?

Проблемы с setTimeout при наличии нескольких копий одного и того же компонента

Сделать панель под кнопкой, которая перекрывает другой элемент

Держите список открытым при выборе элемента

Как создавать страницы в React

Почему мой массив не отображается на моей странице?

Может кто-нибудь сказать мне, почему эта страница постоянно печатает вывод журнала консоли?

(React Native Gesture Handler) Пытался синхронно вызвать функцию из другого потока

TailwindCSS не работает с Vite + React

Получение массива объектов из POKEAPI с использованием REACT.js и AXIOS {Ответил}