What is the best way to achieve vertical text box scrolling in CSS and HTML overflow?

I'm having an issue with a text box I created and I couldn't find a solution elsewhere. Here is the CSS script for the text box:

css:

.cln{
top:220px;
width:680px;
height:350px;
text-align:left;
overflow:scroll;
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
<input type="text" class="cln" placeholder="That is my pet right there:)" maxlength="2024"/>

The problem I am facing is that text typed in the box starts from the center (50% to 50%) and goes sideways instead of moving vertically and it doesn't scroll. I want the text to start from the top left and stay within the borders of the text box. I have tried adjusting white-space overflow text-align properties but nothing seems to work.

Any help or suggestions would be greatly appreciated. Thank you!

Answer №1

To achieve auto-scroll functionality, you can use the textarea element as shown below:

This code snippet will cause automatic scrolling:<br/>
<textarea type="text" class="cln" placeholder="That is my pet right there:)" cols="30" rows="10"></textarea>

Answer №2

Make sure to utilize a textarea instead of an input field

<textarea  class="cln" placeholder="That cute little animal is my beloved pet:)" />

Answer №3

Is it possible to substitute input with textarea?

<textarea type="text" class="cln" placeholder="That's my lovely pet right there:)" maxlength="2024"/></textarea>

See an example here

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

Exploring the html element through Xpath

I am currently attempting to locate an HTML element using Selenium XPath and C#. Here is the code snippet of what I have experimented with: var element = Driver.FindElement(By.XPath("//img[text()='logo-home.png']/@href")); if (element.Display ...

Guide on how to set the grid cell width to 0 for specific dimensions

What can be used in place of mdl-cell--0-col-phone to either disable an element or make its width zero? <div className="mdl-grid"> <div className="mdl-cell mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-cell--2-col-desktop"> <Left ...

Making an element sticky within a container while the parent element is set to overflow hidden

Here is a case where I have generated HTML and CSS code that includes classes for overflow, container height, and sticky positioning: .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .container { max-height: 100px; ...

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

Calculate the total price using Jquery once selections have been made

I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...

Problem with CSS Classes Styling

Having an issue with CSS in Windows Notepad: <!DOCTYPE html> <html> <head> <title>UniqueScience</title> <style> #title { display: block; ...

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

Having trouble fetching information from form in a basic node.js program

Hey, so I'm not exactly a pro at backend development, but I gave it a shot and came up with this straightforward program: Here's my HTML file: <!DOCTYPE html> <head></head> <body> <form action = "http://lo ...

Incorrect font display occurring exclusively on Windows Chrome

There seems to be an issue with the Google served Open Sans font on my website, specifically with Win Chrome where the font appears thick and ugly. However, when I tested it on Win FF and Safari, everything seemed fine. The font also displays correctly on ...

Adjust the width of a div element to a specific size, center the div horizontally, and justify

My issue may be small, but I am struggling to find a solution. I have a content header that is 864px wide with a background image repeated vertically and a footer image. I now have a <div> positioned over the background image and I want it to be 855p ...

Why isn't the image utilizing all the available space?

I'm working on creating a simple card to display services, with just an image and some text. However, I'm facing an issue where the image is not taking up the full width and height of the container as expected. Could someone help me figure out w ...

The transfer of information through HTTP

I have been exploring the inner workings of HTTP servers and clients to better understand how data is transmitted. Despite reading numerous articles on the topic, I still have some lingering questions that remain unanswered. I would like to walk through th ...

change visibility:hidden to visible in a css class using JavaScript

I've put together a list of Game of Thrones characters who might meet their demise (no spoilers included). However, I'm struggling with removing a CSS class as part of my task. Simply deleting the CSS is not the solution I am looking for. I' ...

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

What is the best way to place a semi-transparent black overlay on an image?

<html> <head> <style> #contain_main {background-color:black; width:100%; height:auto;} #main {width:100%; height:700px; background-image:url("https://www.sappun.co.kr/shopimages ...

Is the accuracy of Chrome's inspect device not up to par?

I'm currently testing how the page appears on a 1366x768 laptop. When inspected in the device, it looks perfect: However, on the actual laptop screen, it's completely off: It's so frustrating because I mainly work on a large screen and ca ...

Break the line after every space in words within an element

I have a table/grid view with two words in the <td> like "C2 Sunday". I need a line break after C2 so that it appears as: C2 Sunday Is there a way to achieve this? Please assist me with this issue. Currently, it is showing as "C2 Sunday" and I wou ...

What is preventing me from accessing the php page using the AJAX request?

I am encountering an issue with my HTML and PHP code. I am successfully able to receive the mail.value in txt, but facing a problem during the AJAX call as it doesn't even go into the error function. I need assistance in identifying and rectifying th ...