I figured out to do it in a non-W3c-compliant way and it is working in both IE and Firefox and incidentally in Chrome too.

I added the attribute `wrap` with value `off`, that is `&lt;textarea cols=80 rows=12 wrap=&#39;off&#39;&gt;` is what I have done.

To set no wrapping, you would use:

    white-space: nowrap;

For other values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

NOTE: However the depreciated `wrap=&quot;off&quot;` seems to be the only way for legacy browser support. Though it isn&#39;t HTML 5 compliant, it&#39;s still my preference if you&#39;re targeting all browsers.

If you have pre-formatted text that includes LFs, you should add `white-space: pre;` to the css. That will preserve the new lines that are already in the text and will not wrap long lines.

This works in all versions of Firefox, all Webkit-based browsers, and IE6+.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Try these:

    overflow: scroll; 
    overflow-y: scroll; 
    overflow-x: scroll; 
    overflow:-moz-scrollbars-vertical;
there should also be a -moz-scrollbars-horizontal

Use `white-space: pre;` as CSS property.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

I want to handle F1-F12 keys using JavaScript and jQuery.

I am not sure what pitfalls there are to avoid, and I am not currently able to test implementations in any other browsers than Internet Explorer 8, Google Chrome and Mozilla FireFox 3.

Any suggestions to a full cross-browser solution? Something like a well-tested jQuery library or maybe just vanilla jQuery/JavaScript?

Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser

In JavaScript nested functions are very useful: closures, private methods and what have you..

What are nested PHP functions for? Does anyone use them and what for?

Here&#39;s a small investigation I did

    &lt;?php
    function outer( $msg ) {
    	function inner( $msg ) {
    		echo &#39;inner: &#39;.$msg.&#39; &#39;;
    	}
    	echo &#39;outer: &#39;.$msg.&#39; &#39;;
    	inner( $msg );
    }
    
    inner( &#39;test1&#39; );  // Fatal error:  Call to undefined function inner()
    outer( &#39;test2&#39; );  // outer: test2 inner: test2
    inner( &#39;test3&#39; );  // inner: test3
    outer( &#39;test4&#39; );  // Fatal error:  Cannot redeclare inner()


What are PHP nested functions for?

I would like to provide a horizontal scroll to a textarea in my HTML page. The scroll should appear without wrapping, if I type a long line without a line break. A few friends suggested using overflow-y CSS attribute, which did not work for me. The browsers that I use are IE 6+ and Mozilla 3+.

HTML Textarea horizontal scroll

<p>I would like to provide a horizontal scroll to a textarea in my HTML page. The scroll should appear without wrapping, if I type a long line without a line break. A few friends suggested using overflow-y CSS attribute, which did not work for me. The browsers that I use are IE 6+ and Mozilla 3+.</p>


I have an HTML table that looks like this:

    -------------------------------------------------
    |Column 1                   |Column 2           |
    -------------------------------------------------
    |this is the text in column |this is the column |
    |one which wraps            |two test           |
    -------------------------------------------------
    
But I want it to hide the overflow. The reason here is that the text contains a link to more details, and having the &quot;wrapping&quot; wastes lots of space in my layout. It should like this (without increasing the widths of the columns or the table, because they&#39;ll go off the screen/create a horizontal scrollbar otherwise):

    -------------------------------------------------
    |Column 1                   |Column 2           |
    -------------------------------------------------
    |this is the text in column |this is the column |
    -------------------------------------------------

I&#39;ve tried lots of different CSS techniques to try to get this, but I can&#39;t get it to turn out right. Mootables is the only thing I&#39;ve found that does this: http://joomlicious.com/mootable/, but I can&#39;t figure out how they do it. Does anyone know how I can do this with my own table using CSS and/or Javascript, or how Mootables does it?

Sample HTML:

    &lt;html&gt;&lt;body&gt;
    &lt;table width=&quot;300px&quot;&gt;
    &lt;tr&gt;
        &lt;td&gt;Column 1&lt;/td&gt;&lt;td&gt;Column 2&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
       &lt;td&gt;this is the text in column one which wraps&lt;/td&gt;
       &lt;td&gt;this is the column two test&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;&lt;/body&gt;&lt;/html&gt;

CSS/Javascript to force html table row on a single line

I asked about getting iTextSharp to render a PDF from HTML and a CSS sheet before [here][1] but it seems like that may not be possible...  So I guess I will have to try something else.

Is there an open source .NET/C# library out there that can take HTML ***and*** CSS as input and render it correctly?  

I must reiterate... the library MUST be free and preferably something with a fairly liberal license.  I&#39;m working with basically no budget here.


  [1]: https://stackoverflow.com/questions/430280/render-pdf-in-itextsharp-from-html-with-css

Open Source HTML to PDF Renderer with Full CSS Support

I&#39;m making a page which has some interaction provided by javascript. Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. Obviously in this example, I need each link to store an extra bit of information: the id of the article. The way I&#39;ve been handling it in case was to put that information in the href link this:

    &lt;a class=&quot;article&quot; href=&quot;#5&quot;&gt;

I then use jQuery to find the a.article elements and attach the appropriate event handler. *(don&#39;t get too hung up on the usability or semantics here, it&#39;s just an example)*

Anyway, this method works, but it [smells](https://stackoverflow.com/questions/114342/what-are-code-smells-what-is-the-best-way-to-correct-them) a bit, and isn&#39;t extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)

The immediately obvious answer was to use attributes on the element. I mean, that&#39;s what they&#39;re for, right? (Kind of).

    &lt;a articleid=&quot;5&quot; href=&quot;link/for/non-js-users.html&quot;&gt;

In [my recent question](https://stackoverflow.com/questions/427262/) I asked if this method was valid, and it turns out that short of defining my own DTD (I don&#39;t), then no, it&#39;s not valid or reliable. A common response was to put the data into the `class` attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. Yes it&#39;s technically valid, but it&#39;s not a great solution.

Another method I&#39;d used in the past was to actually generate some JS and insert it into the page in a `&lt;script&gt;` tag, creating a struct which would associate with the object.

    var myData = {
        link0 : {
            articleId : 5,
            target : &#39;#showMessage&#39;
            // etc...
        },
        link1 : {
            articleId : 13
        }
    };

    &lt;a href=&quot;...&quot; id=&quot;link0&quot;&gt;

But this can be a real pain in butt to maintain and is generally just very messy.

So, to get to the question, **how do you store arbitrary pieces of information for HTML tags**?

How to store arbitrary data for some HTML tags

I have long recognized that any set of whitespace in an HTML file will only be displayed as a single space.  For instance, this:

    &lt;p&gt;Hello.        Hello. Hello. Hello.                       Hello.&lt;/p&gt;

displays as:

&lt;p&gt;Hello.        Hello. Hello. Hello.                       Hello.&lt;/p&gt;

This is perfectly fine, as if you need multiple spaces of pre-formatted text you can just use the &amp;lt;pre&amp;gt; tag.  But what is the reason?  More precisely, **why is this in the specification for HTML?**

Why does HTML require that multiple spaces show up as a single space in the browser?

When embedding JavaScript in an HTML document, where is the proper place to put the `&lt;script&gt;` tags and included JavaScript? I seem to recall that you are not supposed to place these in the `&lt;head&gt;` section, but placing at the beginning of the `&lt;body&gt;` section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the _end_ of the `&lt;body&gt;` section as a logical place for `&lt;script&gt;` tags.

So, where _is_ the right place to put the `&lt;script&gt;` tags?

(This question references [this question][1], in which it was suggested that JavaScript function calls should be moved from `&lt;a&gt;` tags to `&lt;script&gt;` tags. I&#39;m specifically using jQuery, but more general answers are also appropriate.)


  [1]: https://stackoverflow.com/questions/436154/why-does-the-call-to-this-jquery-function-fail-in-firefox

Where should I put &lt;script&gt; tags in HTML markup?

There was [another thread about this](https://stackoverflow.com/questions/7477/autosizing-textarea), which I&#39;ve tried. But there is one problem: the `textarea` doesn&#39;t shrink if you delete the content. I can&#39;t find any way to shrink it to the correct size - the `clientHeight` value comes back as the full size of the `textarea`, not its contents.

The code from that page is below:

    function FitToContent(id, maxHeight)
    {
       var text = id &amp;&amp; id.style ? id : document.getElementById(id);
       if ( !text )
          return;
    
       var adjustedHeight = text.clientHeight;
       if ( !maxHeight || maxHeight &gt; adjustedHeight )
       {
          adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
          if ( maxHeight )
             adjustedHeight = Math.min(maxHeight, adjustedHeight);
          if ( adjustedHeight &gt; text.clientHeight )
             text.style.height = adjustedHeight + &quot;px&quot;;
       }
    }

    window.onload = function() {
        document.getElementById(&quot;ta&quot;).onkeyup = function() {
          FitToContent( this, 500 )
        };
    }

Creating a textarea with auto-resize

my simple textarea doesn&#39;t show a horizontal bar when text overflows. It wraps text for a new line. So how do I remove wordwrap and display horizontal bar when text overflows?

How to remove word wrap from textarea?

I’m editing a `&lt;textarea&gt;` with JavaScript. The problem is that when I make line breaks in it, they won’t display. How can I do this?

I’m getting the value to write a function, but it won’t give line breaks.


How to add line breaks to an HTML textarea

I&#39;m wondering how I can insert text into a text area using jquery, upon the click of an anchor tag. 

I don&#39;t want to replace text already in textarea, I want to append new text to textarea.


Insert text into textarea with jQuery

I&#39;m working with the `textarea` element in HTML and want to remove the border of the box. I also want to align the text in the bottom of my `textarea`.

Removing the textarea border in HTML

I have a long string (a DNA sequence). It does not contain any whitespace character.

For example:

    ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

What would be the CSS selector to force this text to be wrapped in a `html:textarea` or in a `xul:textbox`?

How can I force a long string without any blank to be wrapped?

I have a div with a width of 250px. When the innertext is wider than that i want it to break down. The div is float: left and now has an overflow. I want the scrollbar to go away by using word-wrapping. How can i achieve this?

    &lt;div id=&quot;Treeview&quot;&gt;
    &lt;div id=&quot;HandboekBox&quot;&gt;
        &lt;div id=&quot;HandboekTitel&quot;&gt;
            &lt;asp:Label ID=&quot;lblManual&quot; runat=&quot;server&quot;&gt;&lt;/asp:Label&gt;
        &lt;/div&gt;
        &lt;div id=&quot;HandboekClose&quot;&gt;
            &lt;asp:ImageButton ID=&quot;btnCloseManual&quot; runat=&quot;server&quot; 
                ImageUrl=&quot;Graphics/close.png&quot; onclick=&quot;btnCloseManual_Click&quot; 
                BorderWidth=&quot;0&quot; ToolTip=&quot;Sluit handboek&quot; /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;asp:TreeView ID=&quot;tvManual&quot; runat=&quot;server&quot; RootNodeStyle-CssClass=&quot;RootNode&quot;&gt;
        &lt;Nodes&gt;
            
        &lt;/Nodes&gt;
    &lt;/asp:TreeView&gt;
    &lt;/div&gt;

CSS:

    #Treeview
    {
	padding-right: 5px;
	width: 250px;
	height: 100%;
	float: left;
	border-right: solid 1px black;
	overflow-x: scroll;
    }

CSS word-wrapping in div

Is there a word-wrap or any other attribute that stops text from wrapping?  I have a height, and `overflow:hidden`, and the text still breaks.

Needs to work in all browsers, before CSS3.

How to stop text from taking up more than 1 line?

I need to create a container DIV style that contains multiple other DIV&#39;s. It is asked that these DIV&#39;s wouldn&#39;t wrap if the browser window is resized to be narrow.

I tried to make it work like below.

    &lt;style&gt;
       .container
       {
          min-width: 3000px;
          overflow: hidden;
       }
       .slide
       {
          float: left;
       }
    &lt;/style&gt;
    &lt;div class=&quot;container&quot;&gt;
       &lt;div class=&quot;slide&quot;&gt;something&lt;/div&gt;
       &lt;div class=&quot;slide&quot;&gt;something&lt;/div&gt;
       &lt;div class=&quot;slide&quot;&gt;something&lt;/div&gt;
       &lt;div class=&quot;slide&quot;&gt;something&lt;/div&gt;
    &lt;/div&gt;

This works in most cases. However, in some special cases, the rendering is incorrect. I found the container DIV change to 3000px width in RTL of IE7; and it turns to be messy.

Is there any other way to make a container DIV not to wrap?




Content Type	Original Author	Original Content on Stackoverflow
Question	Shyam Kumar Sundarakumar	View Question on Stackoverflow
Solution 1 - Html	Shyam Kumar Sundarakumar	View Answer on Stackoverflow
Solution 2 - Html	Aram Kocharyan	View Answer on Stackoverflow
Solution 3 - Html	azdle	View Answer on Stackoverflow
Solution 4 - Html	Filip Ekberg	View Answer on Stackoverflow
Solution 5 - Html	chtenb	View Answer on Stackoverflow

HTML Textarea horizontal scroll

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

What are PHP nested functions for?

Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser

Attributions