Input tag styled in a center-aligned word document format

My Desired Text Alignment:

I want the text to be centered horizontally at the top of the input. Words should break after hitting the internal padding, similar to how document creation software like Google Docs works with center alignment.

Current Alignment Issue:

Currently, the text is centered in the input box, instead of being horizontally centered at the top. As I continue typing, the text extends to the right without breaking.

Simple HTML Example:

<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 Styling:

.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;
}

Check out the codepen 

https://codepen.io/anon/pen/Kxyqod

If JavaScript is needed, I'm using React, so a solution in the 'React way' would be appreciated.

If you have a CSS solution, utilizing vw units would be ideal.

I'm also working with Bootstrap 4, so any insights related to that would be helpful.

I've searched for an answer to this specific issue but haven't found anything addressing how to align input text like a centered word document with word breaks on internal padding.

If any clarifications are required for this question, please let me know as I'm new to asking questions here.

htmlcssreactjsinputbootstrap-4

Answer №1

Did you consider using the <textarea> tag and applying your CSS there? <textarea> is specifically designed for handling multiple lines of text.

CodePen: https://codepen.io/anon/pen/mGqByr

Answer №2

To address this issue, one potential solution is to utilize the textarea DOM object. This will generate a text box that can be customized according to your specific requirements.

<textarea name="anyname" form="insertformname">Your text</textarea>

If this approach does not suffice, another option could be to incorporate a max length attribute within your input field. This feature can help restrict the amount of characters that can be entered to prevent exceeding a certain limit.

<input type="text" name="usrname" maxlength="10">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The module 'react' is not found in the directory '/react/node_modules/react-redux/lib/components'

Issue: Module react not found at path /home/react/node_modules/react-redux/lib/components While utilizing cypress for unit testing components, the tests are encountering the error mentioned above despite 'react' being present in the dependencies ...

reactjsreact-reduxjestjs

What is the best way to assign a starting value to the array within the `<FieldArray/>` component?

While working with react-final form, I have been building a form that includes conditional fields that are displayed when a user clicks a checkbox. If the checkbox is checked, a component is rendered. The implementation is similar to the example provided ...

reactjsreact-final-formreact-final-form-arrays

The matching of the basename does not appear to be considered when using matchPath in the React router

I have come across a bug related to react-router-dom version 5.0.0 where the active class is not getting applied to the active link. During development, everything works fine with a basename of /, but in our dev environment, the basename is set to `/some/ ...

reactjsreact-router

The loading time for the Docker index HTML file page is unacceptably slow

Sample Dockerfile: FROM ubuntu:22.04 RUN apt-get update RUN apt-get install -y nginx COPY -r dist/ /var/www/html/ CMD service nginx start && tail -F /var/log/nginx/error.log After that, run the following commands: docker build -t website . docker ...

htmlangulardockernginxstatic-files

The implementation of useEffect can lead to the overwriting of states in the parent component

My attempt was to create a wizard that triggers a REST call to update the object with each step. Within my code, there is a ParentComponent responsible for storing data changed in a form located in the ChildComponent. I came across a use case of useEffect ...

reactjs

A specialized WordPress template that loads just the header and footer

I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...

phpcsswordpressheaderfooter

The Chartjs bar graph fails to display data upon initial page load

My HTML page includes a bar chart created using the ChartJS library. However, upon loading the page, the chart appears empty without displaying the data I provided and without rendering the bars. It only responds after clicking on the legend - first displa ...

javascripthtmljquerychart.js

Issue with displaying spinner in bootstrap version 4.0.0

I am having trouble implementing a spinner on my website. I have followed the code below but still can't see the spinner showing up. Can someone please help me troubleshoot this? <!-- Bootstrap CSS --> <link rel="stylesheet" href= ...

htmlbootstrap-4

"What is the best way to include additional fields within a popover in an AngularJS application

This is my code for implementing a popover using AngularJS. I am trying to figure out how to add custom styling to the popover HTML, but I am having trouble binding elements in that part of the code. <!DOCTYPE html> <html> <head> <l ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Having trouble with Flowbite dropdown functionality in Next.js 12.* with Tailwind CSS

Hello, I am a newcomer to Next.js and currently working on a project using Tailwind/Flowbite. I copied and pasted the Flowbite search input with dropdown code from , but unfortunately, the dropdown is not functioning as expected. I have followed the docum ...

cssnext.jsdrop-down-menutailwind-cssflowbite

Is it possible to link a css file from an ascx control during registration?

Is there a specific way to register a css code block within an ascx control? Do I simply place <head id="head" runat="server"> <style type="text/css"> .customClass { background-color: Lime; } < ...

asp.netcssascx

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

After a user makes a selection, I am attempting to reset the 'selected' item. This process calls the Vue function tS() shown below. The issue lies with the first call $('#sel1').prop('selectedIndex',0);, as it only seems to wo ...

javascriptjqueryhtmlvue.js

Creating CSS style rules for aligning table column headers in JavaFXML

Is it possible to style columns individually in a tableview? I have been attempting to make some column headers left-aligned and others right-aligned, as shown below: | hdr1 | hdr2 | hdr3 | hdr4 | In my css stylesheet, I experimented with the following ...

javacssjavafx-8

What methods are available to stop the hashing of className in NextJS?

Within our Nextjs application, our team utilizes Google Tag Manager and Optimizely. These tools rely on CSS selectors to target different sections of the page. Currently, we are implementing CSS Modules. However, with every code deployment, our class name ...

reactjsnext.js

What is causing the search feature to malfunction on the Detail page?

In my project, I have different components for handling shows. The Shows.jsx component is responsible for rendering all the shows, while the ProductDetails component displays information about a single show. Additionally, there is a Search component which ...

javascriptreactjsredux

The ng-class condition is in flux, however, the new style is not being

Attempting to modify the background of the pane in an Ionic application based on the condition of the ng-class as shown. Changing the condition in the code and refreshing the page manually works correctly, but updating the condition from user input does ...

javascriptcssangularjsionic-framework

Can anyone provide a workaround for bypassing ts 2339 error in order to access class methods? Alternatively, is it feasible to define class methods outside of the class in typescript?

My plan is outlined below class A { constructor() { bind(this); } hello(){ this.method1(); // <-- I will get error at this line saying method one does not exist on typeOf A } } function bind(thisReference) { function method1() { ...

reactjstypescriptdesign-patternsinterfaceecmascript-next

Persistent hover effect for collapsible accordion panels when closing them

My simple accordion features a functionality where a class of .open is added to the title + content group when you open a panel for styling purposes. Everything works smoothly, but I've noticed on my phone that after clicking to close a panel, the hov ...

javascriptjqueryhtmlcsstouch

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

htmlrxmlweb-scraping

Utilize ASP.Net to Retrieve and Showcase RSS Feeds

Looking to read and display a specific feed on my website. Developed in C# using .NET 2. Attempted to follow this tutorial: Encountered the following error: A column named 'link' already belongs to this DataTable: cannot set a nested table n ...

c#javascripthtmlasp.netrss