在Bootstrap3.0中添加单词之间的空格（HTML转义字符不起作用）

Stackoverflow，请帮忙

我正在为我朋友的摄影业务开发一个使用Bootstrap3.1.1和AngularJS的网站

尝试在导航栏中的单词之间添加制表符时遇到的问题，例如：

<a href="#/" class="navbar-brand">JOHN &#9;&#9; DOE</a>

我唯一能做到这一点的方法是使用标记，但这会导致与所需的样式完全不同的样式

我试过使用和不使用AngularJS$Sanitize模块，但都没有效果

我想我遗漏了一些基本的东西，但我显然不确定那是什么

提前感谢,

---

约翰多

使用span将提供更干净的代码

然后css：

span.tab-space{左填充：5em；}

你也可以这样做：

<a href="#/" class="navbar-brand">JOHN <span class="space-left">DOE</span></a>

---

为了使浏览器不会折叠空白。

当样式转换为网站时，最好的做法是将HTML标记与页面的CSS样式分开，以便内容和样式独立运行，并且更容易互换。也就是说，使用HTML实体（如影响样式）是不干净的，因为它违反了这一规则

如果您需要一些空白，请在文本周围环绕一个标记，并给它一些填充

HTML:

使用CSS字间距：

<span class="tab-space"> </span>

或者，如果在某些点上只需要制表符空间，请使用：

span.tab-space {
  word-spacing:5em;
}

---

为什么不使用span并在一个类中为span定义它？值得注意的是，我不是一个经验丰富的前端开发人员。@Aibrean感谢您的快速响应，您能提供一个简单的示例吗？我试过使用span标记，将我想要隔开的每个单词都括起来。@Aibrean例如：john&9；doeI在这里用Aibrean的建议创建了一个例子：我会给它一个重击，如果它有效的话，我会接受这个答案，谢谢你的输入！这是有效的：干净和简单。再三感谢！=]一旦足够的时间过去，我会接受答案。毫无疑问，这看起来是正确的，但这难道不意味着搜索引擎和屏幕阅读器会将其视为一个词吗？@rybo111是否有任何解决方案来改进此建议实施的SEO？目前，该网站的目的是作为一个在线简历，以显示潜在雇主，所以搜索引擎优化不是一个主要问题。但这很可能会改变。@rybo111在这种情况下，您可以在DOE之前或JOHN之后添加一个空格。考虑到他想要那里的空间，更多的空间不会有伤害；它适用于Chrome1.0、Firefox1.0、IE6.0、Opera4.0和Safari1.0。你认为什么浏览器不能工作？我在想另一种语法。注释删除：@戴夫，我会认为这是一个合适的目标浏览器范围。我对支持所有浏览器，尤其是IE早期版本的艰巨任务并不特别感兴趣。@dave有点离题，但相关的问题是，如果我将此解决方案添加到我的自定义CSS文件中，并在我使用的第三方样式表之后加载，这会覆盖.navbar品牌的所有其他样式功能吗？我想保持第三方样式表的完整性，但我想在我的网站上添加这个额外的样式功能。@JohnDoe-如果您添加这个自定义CSS，它将只覆盖.navbar brand的空白CSS属性，应用于它的所有其他样式都将保持完整，这是对Aibrean答案提供的解决方案的一个很好的解释。谢谢你的意见。这似乎是一个干净的方法来获得我需要的效果。等我有空整理我的工作时，我会试试这个。。谢谢

a.navbar-brand{
  word-spacing:5em;
}

<span class="tab-space"> </span>

span.tab-space {
  word-spacing:5em;
}