Use `white-space: pre` to preserve whitespace preformatting as in the `pre` element. To go a step further, also add `font-family: monospace`, as `pre` elements are typically set in a monospace font by default (e.g. for use with code blocks).

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .preformatted {
        font-family: monospace;
        white-space: pre;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;preformatted&quot;&gt;

      Please procure the following items:

        - Soup
        - Jam
        - Hyphens 
        - Cantaloupe
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



    .preformatted {
       white-space: pre-wrap;
    }

 I think &quot;pre-wrap&quot; is better. It can help with long length in line.

Yes:

    div.preformatted {
        white-space: pre;
        }

Reference:

* [`white-space`](https://developer.mozilla.org/en/CSS/white-space).

inorder to get `&lt;pre&gt;` you may use;

    div.preformatted{ white-space: pre ; display: block; }

When I have this code

    $.ajax({
        type: &#39;POST&#39;,
        //contentType: &quot;application/json&quot;,
        url: &#39;http://localhost:16329/Hello&#39;,
        data: { name: &#39;norm&#39; },
        dataType: &#39;json&#39;
    });
in Fiddler I can see following raw request

	POST http://localhost:16329/Hello HTTP/1.1
	Host: localhost:16329
	User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
	Accept: application/json, text/javascript, */*; q=0.01
	Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
	Accept-Encoding: gzip, deflate
	Connection: keep-alive
	Content-Type: application/x-www-form-urlencoded; charset=UTF-8
	Referer: http://localhost:14693/WebSite1/index.html
	Content-Length: 9
	Origin: http://localhost:14693
	Pragma: no-cache
	Cache-Control: no-cache

	name=norm

But what I&#39;m trying is to set content-type from **application/x-www-form-urlencoded** to **application/json**. But this code

    $.ajax({
        type: &quot;POST&quot;,
        contentType: &quot;application/json&quot;,
        url: &#39;http://localhost:16329/Hello&#39;,
        data: { name: &#39;norm&#39; },
        dataType: &quot;json&quot;
    });
Generates strange request (which I can see in Fiddler)

	OPTIONS http://localhost:16329/Hello HTTP/1.1
	Host: localhost:16329
	User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
	Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
	Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
	Accept-Encoding: gzip, deflate
	Connection: keep-alive
	Origin: http://localhost:14693
	Access-Control-Request-Method: POST
	Access-Control-Request-Headers: content-type
	Pragma: no-cache
	Cache-Control: no-cache


Why is that? What is OPTIONS when it should be POST there? And where is my content-type set to application/json? And request parameters has gone for some reason.

**UPDATE 1**

On server side I have really simple RESTful service.

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class RestfulService : IRestfulService
    {
        [WebInvoke(
            Method = &quot;POST&quot;,
            UriTemplate = &quot;Hello&quot;,
            ResponseFormat = WebMessageFormat.Json)]
        public string HelloWorld(string name)
        {
            return &quot;hello, &quot; + name;
        }
    }
But for some reason I can&#39;t call this method with parameters.

**UPDATE 2**

Sorry for not answering so long. 

I&#39;ve added these headers to my server response

     Access-Control-Allow-Origin: *
     Access-Control-Allow-Headers: Content-Type
     Access-Control-Allow-Methods: POST, GET, OPTIONS

It didn&#39;t help, I have **Method not allowed** error from server.

Here is what my fiddler says

![enter image description here][1]

So, now I can be sure that my server accepts *POST, GET, OPTIONS* (if response headers work like I expect). But why &quot;Method not allowed&quot;?

In WebView response from server (you can see *Raw* response on picture above) looks like this

![enter image description here][2]


  [1]: http://i.imgur.com/jIuk0.png
  [2]: http://i.stack.imgur.com/jX2AW.png

Cannot set content-type to &#39;application/json&#39; in jQuery.ajax

This code is supposed to hash a password with a salt.  The salt and hashed password are being saved in the database.  The password itself is not.

Given the sensitive nature of the operation, I wanted to make sure everything was kosher.  

    import hashlib
    import base64
    import uuid
    
    password = &#39;test_password&#39;
    salt     = base64.urlsafe_b64encode(uuid.uuid4().bytes)
    

    t_sha = hashlib.sha512()
    t_sha.update(password+salt)
    hashed_password =  base64.urlsafe_b64encode(t_sha.digest())

Salt and hash a password in Python

Is there any way to emulate the display of a `pre` element via CSS?

For example, can I keep the whitespace intact in this div by using a CSS rule?

    &lt;div class=&quot;preformatted&quot;&gt;

      Please procure the following items:

        - Soup
        - Jam
        - Hyphens 
        - Cantaloupe
    &lt;/div&gt;

Display element as preformatted text via CSS

Is there any way to emulate the display of a <code>pre</code> element via CSS?
For example, can I keep the whitespace intact in this div by using a CSS rule?
<pre><code class="hljs language-markdown">&#x3C;div class="preformatted">

 Please procure the following items:

 - Soup
 - Jam
 - Hyphens 
 - Cantaloupe
&#x3C;/div>
</code></pre>

Android&#39;s TextView class can display formatted text via HTML.fromHtml() as explained for example here: https://stackoverflow.com/questions/4546009/html-tags-in-string-for-textview

The TextView class can only deal with a small subset of HTML, but I do not know which tags and attributes are supported and which are not. The summary given here: http://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html does not seem to be correct. E.g. &amp;lt;div align=&amp;quot;...&amp;quot;&amp;gt; does NOT work for me using Android 2.2



Which HTML tags are supported by Android TextView?

***EDIT-2:** None of the answers seem to work. Not even the one I previously marked as the answer of this question. Any help is appreciated. Thanks.*

First, I have googled for a how-to on creating a &#39;Go Back&#39; link that allows the user to return to the previous page, and these are two ways of doing it:

    &lt;a href=&quot;javascript:history.go(-1)&quot;&gt;[Go Back]&lt;/a&gt;

and...

    &lt;a href=&quot;#&quot; onclick=&quot;history.go(-1);return false;&quot;&gt;[Go Back]&lt;/a&gt;

Which of these two is a better choice? And why? (Also, please shed some light on browser compatibility.)

That&#39;s one half of the question. Now if mine is the first page the user is visiting, the &#39;Go Back&#39; link wouldn&#39;t work, right? (As there&#39;s no pre-existing history for the window or tab.) In that case, I want the link to fallback and take the user to http://example.com.

i.e. if history exists, the user is taken to the previous page, and if it doesn&#39;t he&#39;s taken to http://example.com.

How do I do that? Hope someone can help.

**EDIT:** Please note that I do not know JavaScript, so kindly make your answer explanative. Thanks.

Using Javascript: How to create a &#39;Go Back&#39; link that takes the user to a link if there&#39;s no history for the tab or window?

How can I disable &quot;Save Video As...&quot; from a browser&#39;s right-click menu to prevent clients from downloading a video?

Are there more complete solutions that prevent the client from accessing a file path directly?

Prevent HTML5 video from being downloaded (right-click saved)?

I&#39;m stuck deciding which to use as both seem to work.

Should I be placing links `&lt;a&gt;` inside of `&lt;h2&gt;` elements?

Or the other way around?

What is the correct standard?

Semantically, which is more correct: a in h2, or h2 in a?

Basically if I have a div loaded onto a page with a `data-test` attribute and change the value of it with jquery&#39;s `.data(&#39;test&#39;)` I can no longer select the element with `$(&#39;div[data-test=&quot;newValue&quot;]&#39;)`

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var howMany = $(&#39;.t[data-test=&quot;test&quot;]&#39;).length;
    $(&#39;.result&#39;).html(&#39;start there are &#39; + howMany + &#39; divs with data &quot;test&quot;&lt;br /&gt;&lt;br /&gt;&#39;);
    setTimeout(function() {
      $(&#39;#one, #three&#39;).data(&#39;test&#39;, &#39;changed&#39;);
    }, 500);
    setTimeout(function() {
      var test = $(&#39;.t[data-test=&quot;test&quot;]&#39;).length,
        changed = $(&#39;.t[data-test=&quot;changed&quot;]&#39;).length;
      $(&#39;.result&#39;).append(&#39;there are &#39; + test + &#39; divs still with data &quot;test&quot;&lt;br /&gt;&lt;br /&gt;there are &#39; + changed + &#39; divs still with data &quot;changed&quot;&lt;br /&gt;&lt;br /&gt;&#39;);
    }, 1000);
    setTimeout(function() {
      $(&#39;.t&#39;).each(function() {
        $(&#39;.result&#39;).append(&#39;div #&#39; + $(this).attr(&#39;id&#39;) + &#39; has the test data of: &#39; + $(this).data(&#39;test&#39;) + &#39;&lt;br /&gt;&lt;br /&gt;&#39;);
      });
    }, 1500);

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;div class=&quot;t&quot; id=&quot;one&quot; data-test=&quot;test&quot;&gt;1&lt;/div&gt;
    &lt;div class=&quot;t&quot; id=&quot;two&quot; data-test=&quot;test&quot;&gt;2&lt;/div&gt;
    &lt;div class=&quot;t&quot; id=&quot;three&quot; data-test=&quot;test&quot;&gt;3&lt;/div&gt;
    &lt;div class=&quot;t&quot; id=&quot;four&quot; data-test=&quot;test&quot;&gt;4&lt;/div&gt;
    &lt;div class=&quot;result&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;



JQuery data selector not updating with .data

Is it possible to have a multi level dropdown menu by using the elements of twitter bootstrap 2?
The original version doesn&#39;t have this feature.

Twitter Bootstrap Multilevel Dropdown Menu

I&#39;m looking for a CSS solution to the following:-

    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div style=&quot;display:inline;&quot;&gt;
         &lt;div&gt;The content of this div is dynamically created but will always be wider than
                  the below div. 
         &lt;/div&gt;
         &lt;div&gt; Need this div to have the same width as the above div.
         &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

The wrapper `div` has an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.

Many thanks for any suggestions in advance. 

Set div to have its siblings width

My web page has input fields to which I have applied the following css :

```css
.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
```

But this doesn&#39;t seem to have any effect.
Am I missing something obvious here or is it not possible to have an ellipsis in an input field using CSS only?


How to use text-overflow ellipsis in an html input field?

I&#39;m trying to get a CSS animation property to stay after completing, is this possible?

This is what I&#39;m trying to achieve...

The element should be hidden when the user lands on the page, after 3 seconds (or whatever), it should fade in and once the animation has completed it should stay there.

Here is a fiddle attempt...
http://jsfiddle.net/GZx6F/

Here is the code for preservation...

    &lt;h2&gt;Test&lt;/h2&gt;

    &lt;style&gt;
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 0.9;
		}
	}
		
	h2 {
		animation: fadeIn 1s ease-in-out 3s;
	}
    &lt;/style&gt;

I know how to do this with jQuery.. it would be like this...

    &lt;h2&gt;test&lt;/h2&gt;

    &lt;script&gt;
      $(document).ready(function(){
        $(&#39;h2&#39;).hide().delay(3000).fadeIn(3000)
      });
    &lt;/script&gt;



CSS Animation property stays after animating

anyway to make a rotation work on the pseudo 

    content:&quot;\24B6&quot;? 

I&#39;m trying to rotate a unicode symbol.

css rotate a pseudo :after or :before content:&quot;&quot;

I&#39;ve got a problem, where a large commit which changes about a thousand lines of code, removing whitespace from the end of lines and removing spaces before tabs.

There are also about 50 pull requests for this project, in which all will get conflicts, when my commit is merged. Is there any way that git can be set up so that when merging future commits, it ignores conflicts where one of them is just a whitespace change?

Modifying git itself or using a third party tool isn&#39;t possible, but using a hook is fine.


Merging without whitespace conflicts

I just lost part of my weekend because of this ... joker - zero width space. I just used some snippets from google groups and didn&#39;t recognize that there are doubled characters, because Idea (11) didn&#39;t show them, which was causing problems with parsing config file of my app... I discovered it accidentally in vi.

Is there any way to display such things in IntelliJ (or some other way to examine files) without using external editors.

IntelliJ 11 / Mac OS 10.7

**edit - sample**

These two lines looks identical, in browser and also in Idea. You can see in page&#39;s code that in first - commented line there is hidden zero width space between `mysql://` and `localhost`, which causes problems. Of course if you expect that &#39;joker&#39;, you can try to use search and replace it, however nobody expects the sign that should not be there, especially if he cannot see it in any way. 

    #db.default.url=&quot;jdbc:mysql://​localhost/play-fullcalendar&quot;
     db.default.url=&quot;jdbc:mysql://localhost/play-fullcalendar&quot;

How to display hidden characters by default (ZERO WIDTH SPACE ie. &amp;#8203)

At work we are several developers and don&#39;t have a code style guide, and some developers indent with tabs, and some others with 4 spaces (luckily noone of the indent with spaces people uses different than 4 spaces). In general this is no (big) problem because in our editors we set `tabwidth=4` and all the indentation seems correct.

But in `git diff` or `git show` that&#39;s what appears:

    diff --git a/mesclatabs.php b/mesclatabs.php
    new file mode 100644
    index 0000000..1986c91
    --- /dev/null
    +++ b/mesclatabs.php
    @@ -0,0 +1,5 @@
    +&lt;?php
    +function foo() {
    +       echo &quot;line with 1 tab\n&quot;;
    +    echo &quot;line with 4 spaces\n&quot;;
    +}

The problem is `git diff` or `git show` where each tabs appears as wide as 8 spaces (well, in reality appears as a tab, and the shell (bash in my case) is showing the tab as 8 spaces. I suppose there must be some bash config to change this, but I&#39;d like to know if git has an option to output tabs as 4 spaces in `diff` / `show`, as some developers work with `zsh` instead of `bash`.

Any ideas?


setting tabwidth to 4 in git show / git diff

Are there any tools / UNIX single liners which would remove trailing whitespaces for multiple files **in-place**.

E.g. one that could be used in the conjunction with *find*.

How to remove trailing whitespaces for multiple files?

i have defined some strings in the `strings.xml` file. Now I need to put some extra space between some numbers in the string. When I type extra space characters this is not showing on the application though.

Before:

    &lt;string name=&quot;spelatonertext3&quot;&gt;-4, 5, -5, 6, -6,

And if I put extra space like this:

    &lt;string name=&quot;spelatonertext3&quot;&gt;-4,  5, -5,   6,  -6,

It just looks the same on the app. How can I make space characters into the XML string?

How to put space character into a string name in XML?

Possible ways:

    &lt;pre&gt; ... &lt;/pre&gt;

or

    style=&quot;white-space:pre&quot;

Anything else?


How to insert spaces/tabs in text using HTML/CSS

Per the examples https://getbootstrap.com/docs/4.3/content/code/#code-blocks, bootstrap only supports vertically-scrollable and word-wrapped `&lt;pre&gt;` blocks out of the box. How do I make it so that I have horizontally-scrollable, unwrapped code blocks instead?

How to make Twitter Bootstrap&#39;s &lt;pre&gt; blocks scroll horizontally?

![This image show what i happens in my code][1]
This is my blog page. Sometimes I have to use C#,PHP and other code snippets in the blog. Therefore I use pre tags to make it looks nice and keep the formatting code as it is. `pre` tag width is 100% and it has a background colour. However, the text went away from it as in the above image and horizontal scroll bar going to appear. How can I overcome this? I don&#39;t want the bottom scroll bar. 


  [1]: http://i.stack.imgur.com/WQnB0.png
  [2]: http://elshansoft.info/b/index.php

HTML &lt;pre&gt; tag values get horizontal scroll bars,how to format it?

I&#39;d like to display raw HTML. We all know one has to escape each &quot;&lt;&quot; and &quot;&gt;&quot; like this:

         &lt;PRE&gt; this is a test  &amp;ltDIV&amp;gt &lt;/PRE&gt;

However, I do not want to do this. I&#39;d like a way to keep the HTML code as is (since it is easier to read, (inside the editor) and I might want to copy it and use it again myself as actual HTML code, and do not want to have to change it again or have two versions of the same code, one escaped and one not escaped.

Is there any other environment that is more &quot;raw&quot; than PRE that might allow this?  So one does not have to keep editing HTML and changing everything each time they want to show some raw HTML code, maybe in HTML5?

Something like `&lt;REALLY_REALLY_VERBATIM&gt; ...... &lt;/&lt;REALLY_REALLY_VERBATIM&gt;`

The JavaScript solution does not work on Firefox 21, here is a screenshot:

![screenshot of non-working code][1]

The first solution still does not work on Firefox, here is a screenshot:

![screenshot of HTML code][2]

  [1]: https://i.stack.imgur.com/eDdnT.jpg
  [2]: https://i.stack.imgur.com/JyJnX.jpg


Content Type	Original Author	Original Content on Stackoverflow
Question	Dagg Nabbit	View Question on Stackoverflow
Solution 1 - Html	BoltClock	View Answer on Stackoverflow
Solution 2 - Html	Kondrashenkov Anton	View Answer on Stackoverflow
Solution 3 - Html	David Thomas	View Answer on Stackoverflow
Solution 4 - Html	Govinnage Rasika Perera	View Answer on Stackoverflow

Display element as preformatted text via CSS

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Salt and hash a password in Python

Cannot set content-type to 'application/json' in jQuery.ajax

Attributions