CODEWITHSUNDEEP
htmlcss
Sean Anderson
Sean Anderson

Reputation: 29301

Make DIV element contain text like that of an input element?

I am attempting to make a div element work similarly to that of an input element.

http://jsfiddle.net/MRP5M/6/

I was wondering how the input element achieves the ability to scroll to the side without having scrollbars? I don't want my div element expanding to multiple rows to hold content, but I did not see any CSS properties controlling this behavior on the input element.

UPDATE: All good solutions. Thank you guys for looking into it. It would appear that some aspects of the input element are controlled by the browser (i.e. highlight-to-scroll). It would appear difficult to emulate this functionality without use of Javascript. I've marked the first response as the solution.

Upvotes: 3

Views: 3857

Answers (2)

rafaelbiten
rafaelbiten

Reputation: 6240

  1. You can set "white-space: nowrap;" inside your .editable div
  2. After that, just set a fixed height to your #wrapper (something like 20px) and overflow: hidden;

It will work as I just tried. The "white-space: nowrap" will avoid any line break, so you don't need to set a fixed width inside your .editable div.

Update: As for the option to select all text with your mouse, Alohci just pointed out on the comments to this post that you can add "overflow: auto;" to your .editable div and it will behave as wanted, at least on Chrome, where I just tried. Alohci also pointed to a Fiddle. Credits to him.

Upvotes: 2

Zuul
Zuul

Reputation: 16269

Input fields aspect and behaviour is controlled by the browser itself. You can use CSS to prevent the text from breaking:

See this working Fiddle example!

.editable {
   white-space: nowrap;
}

As to scroll without using scroll-bars, you can only achieve either by using JavaScript or altering the HTML as to have an input disguised as a div:

See this working Fiddle example!

HTML

<div id="wrapper">
   <input type="text" value="A really long string of content" />
</div>
<input type="text" value="A really long string of content" />

CSS

#wrapper{
   width: 151px;
}

#wrapper > input {
   border: 0 none;
   background-color: white,
   color: black;
}

Upvotes: 1

Related Questions