How to scroll textarea horizontally?

Question

Apu February 04, 2023 › #Attribute › #css

❌

How to scroll textarea horizontally?

Hello everyone, whenever you create a textarea it scrolls vertically basically. But in this article you will learn that how to make a textarea that will scroll horizontally with the help of css and html attributes.

Live Demo

    <style>
      .textarea {
         white-space: nowrap;
         overflow-x:auto;
         overflow-y:hidden;
       }
    </style>
    <textarea class="textarea">
      This is a paragraph to make sure that the textarea is scrolling horizontally. 
      
      Finally the textarea is scrolling. 
    </textarea>

Maybe there is many methods to scroll a textarea horizontally . But I'm going to share two methods. The first method is using the css and the other using the html attribute.

Scroll a textarea horizontally using css

Create a textarea with a class name textarea.
Select the textarea with the class textarea and write the css code inside the <style> </style> tag
white-space:nowrap; The text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.
overflow-x:auto; the auto value is similar to scroll , but it adds the scrollbars only when necessary.

    <style>
      .textarea {
         white-space: nowrap;
         overflow-x:auto;
         overflow-y:hidden;
       }
    </style>
    <textarea class="textarea">
      This is a paragraph to make sure that the textarea is scrolling horizontally. 
      
      Finally the textarea is scrolling. 
    </textarea>

Scroll textarea content horizontally using html attribute.

In the second method, you can make a textarea that will scroll horizontally with the help of an HTML attribute name wrap="".

The attribute wrap contains a value off or on.

<textarea wrap="off">
  <html>
    <head>
      <title>html tags</title>
    </head>
    <body bgcolor="#0000ff">
      <h1>This is my first heading</h1>
      <p>This is my first paragraph</p>
      <h5>This is a paragraph to make sure that the textarea is scrolling horizontally. <br> Finally the textarea is scrolling.</h5>
    </body>
  </html>
</textarea>

Write Your Answer

Apu · Accepted Answer · 2023-02-04T12:56:39+05:30

Hello everyone, whenever you create a textarea it scrolls vertically basically. But in th…