Что бы я хотел увидеть:
Выравнивание по центру текста, начиная с верхней части ввода. Слова ломаются после попадания на внутренние отступы (представьте себе любое программное обеспечение для создания документов, например, Google Docs, и как оно будет работать с активным выравниванием по центру).
Что у меня сейчас:
Текст является мертвой точкой ввода, когда он должен центрироваться горизонтально, оставаясь сверху. Если я продолжу создавать текст, он прерывается вправо, а не ломается.
Базовый пример HTML
<div class="text-contain">
<input type="text" class="textArea"
value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."/>
</div>
И Css:
.textArea {
text-align: center;
display: block;
vertical-align: text-top;
word-break: break-word;
white-space: nowrap;
margin-top: 10px;
min-height: 40vh;
width: 66vw;
}
Вот кодекс https://codepen.io/anon/pen/Kxyqod
Если для этого подхода требуется JS , я использую React для обработки этого кода, поэтому я был бы признателен за ответ «ответьте», если он дойдет до него.
Если у вас есть решение css , было бы здорово, если бы я мог продолжать использовать vw.
Я также использую Bootstrap 4 , если что-то приходит на ум.
Я искал ответ на этот конкретный вопрос, но, похоже, не могу найти ничего, связанного с тем, чтобы входные данные выглядели как документы с выравниванием по центру с разрывами слов на внутреннем заполнении.
Если мне нужно внести какие-либо изменения в этот вопрос, пожалуйста, дайте мне знать! Я новичок в задании вопросов здесь.