Nbsp Not Working in CSS Content Tag

nbsp not working in CSS content tag

This could be the answer you are looking for :

content: "|\00a0\00a0";

Add a space in CSS content

For CSS content   use \a0. The following is a list of different types of spaces and their CSS code:

• space: \20
• nbsp: \a0
• en space: \2002
• em space: \2003
• 3 per em space: \2004
• 4 per em space: \2005
• 6 per em space: \2006
• figure space: \2007
• punctuation space: \2008
• thin space: \2009
• hair space: \200a
• zero width space: \200b
• narrow nbsp: \202f
• medium mathematical space: \205f
• zero width nbsp: \feff

Demo

a {
  display: block;
}

a::before {
  font-family: FontAwesome;
  display: inline-block;
}

#x0::before {
  content: "\f095";
}

#x1::before {
  content: "\f095\20"
}

#x2::before {
  content: "\f095\a0"
}

#x3::before {
  content: "\f095\2002"
}

#x4::before {
  content: "\f095\2003"
}

#x5::before {
  content: "\f095\2004"
}

#x6::before {
  content: "\f095\2005"
}

#x7::before {
  content: "\f095\2006"
}

#x8::before {
  content: "\f095\2007"
}

#x9::before {
  content: "\f095\2008"
}

#xa::before {
  content: "\f095\2009"
}

#xb::before {
  content: "\f095\200a"
}

#xc::before {
  content: "\f095\200b"
}

#xd::before {
  content: "\f095\202f"
}

#xe::before {
  content: "\f095\205f"
}

#xf::before {
  content: "\f095\feff"
}

#x0::after {
  content: "\a0\a0"
}

#x1::after {
  content: "\a0\a0\\20"
}

#x2::after {
  content: "\a0\a0\\a0"
}

#x3::after {
  content: "\a0\a0\\2002"
}

#x4::after {
  content: "\a0\a0\\2003"
}

#x5::after {
  content: "\a0\a0\\2004"
}

#x6::after {
  content: "\a0\a0\\2005"
}

#x7::after {
  content: "\a0\a0\\2006"
}

#x8::after {
  content: "\a0\a0\\2007"
}

#x9::after {
  content: "\a0\a0\\2008"
}

#xa::after {
  content: "\a0\a0\\2009"
}

#xb::after {
  content: "\a0\a0\\200a"
}

#xc::after {
  content: "\a0\a0\\200b"
}

#xd::after {
  content: "\a0\a0\\202f"
}

#xe::after {
  content: "\a0\a0\\205f"
}

#xf::after {
  content: "\a0\a0\\feff"
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href='#/' id='x0'>CALL</a>
<a href='#/' id='x1'>CALL</a>
<a href='#/' id='x2'>CALL</a>
<a href='#/' id='x3'>CALL</a>
<a href='#/' id='x4'>CALL</a>
<a href='#/' id='x5'>CALL</a>
<a href='#/' id='x6'>CALL</a>
<a href='#/' id='x7'>CALL</a>
<a href='#/' id='x8'>CALL</a>
<a href='#/' id='x9'>CALL</a>
<a href='#/' id='xa'>CALL</a>
<a href='#/' id='xb'>CALL</a>
<a href='#/' id='xc'>CALL</a>
<a href='#/' id='xd'>CALL</a>
<a href='#/' id='xe'>CALL</a>
<a href='#/' id='xf'>CALL</a>

CSS: content:\00a0

I've used it before to implement styling text on a floated list

#horz-list li {

  list-style: none;

  float: left;

}

#horz-list li:after {

  content: "\00a0-\00a0";

}

 #horz-list li:last-child:after {

  content: "";

}

<ul id="horz-list">

  <li>first item</li>

  <li>second item</li>

  <li>third item</li>

</ul>

  jsx not working

See: JSX In Depth

Try:
Select Scenario:{'\u00A0'}

Or:
<div dangerouslySetInnerHTML={{__html: 'Select Scenario:  '}} />

Or:
<div> </div>

jsfiddle

Update

After seeing some of the comments, and trying it out. It has come to my attention that using html entites inside JSX works fine (unlike what is stated in the above jsx-gotchas reference [maybe it's outdated]).

So using something like: R&D, would output: 'R&D'.
There is a weird behavior with  , which causes it to render differently, thus causing me to think it doesn't work:

<div>This works simply:- -</div>
<div>This works simply:- {'\u00A0'}-</div>

Produces:

This works simply:- -
This works simply:-  -

Tab space instead of multiple non-breaking spaces (nbsp)?

It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.

Adding HTML entities using CSS content

You have to use the escaped unicode :

Like

.breadcrumbs a:before {
  content: '\0000a0';
}

More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Align two text inside P Tag Using Css Instead of  

If you're not looking to use a table:

/* external.css */

html,body{

  padding:0; margin:0;

}

body{

  background:#000; overflow-y:scroll;

}

.main{

  width:940px; background:#ccc; padding:20px; margin:0 auto;

}

#details>*{

  display:block;

}

label{

  float:left; width:100px;

}

#map{

  margin-top:10px;

}

<!DOCTYPE html>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

  <head>

    <meta http-equiv='content-type' content='text/html;charset=utf-8' />

    <meta name='viewport' content='width=device-width' />

    <title>Test Template</title>

    <link type='text/css' rel='stylesheet' href='external.css' />

    <script type='text/javascript' src='external.js'></script>

  </head>

<body>

  <div class='main'>

    <div id='details'>

      <label for='web'>Website:</label>

      <a id='web' href='https://www.helloworld.com'>https://www.helloworld.com</a>

      <label for='mail'>Email:</label>

      <a id='mail' href='mailto:support@helloworld.com'>support@helloworld.com</a>

      <label for='phone'>Phone:</label>

      <a id='phone' href='tel:00554422000'>00-554422000</a>

      <a id='map' href='https://www.google.com/maps/dir//Reno,+NV/@39.557847,-119.9909255,11z/data=!4m8!4m7!1m0!1m5!1m1!1s0x809940ae9292a09d:0x40c5c5ce7438f787!2m2!1d-119.8138027!2d39.5296329'>Not the Secret Service HQ</a>

      <label for='adr'>Address:</label><div id='adr'>3829 Martha Ellen Drive</div>

      <label for='cs'>City & State</label><div id='cs'>Reno, NV</div>  

      <label for='zip'>Postal Code:</label><div id='zip'>89509</div>

    </div>

  </div>

</body>

</html>

---

Related Topics