跨度元素内的CSS多个空格答案

【问题标题】：CSS multiple spaces inside span element跨度元素内的CSS多个空格
【发布时间】：2012-03-06 13:50:52
【问题描述】：

我有一个页面，我试图在浏览器上显示全名（firstName lastName）。

在我的 JSP 中，我有

<span>
    <c:if test="${someCondition1}">
        <c:out value="${firstName}">
    </c:if>
    <c:if test="${someCondition2}">
        <c:out value="${lastName}">
    </c:if>
</span>

现在 span 元素内有一些代码缩进空间。问题是在 Firefox 中，代码空间没有折叠，而 IE 折叠它们。

我还尝试使用各种 CSS 空白属性；普通、换行、-moz-pre-wrap 等

但这似乎由于某种原因不起作用。

此外，我可能无法使用 white-space 属性来解决此问题，因为我可以在 firstName/lastName 中有多个空格，这些空格应该按原样显示，例如名字可以是

"my    First   Name"

因此在 span 元素上使用 CSS white-space 来折叠多个空格是错误的。

【问题讨论】：

mh...你想要空格还是删除它们？
我希望删除代码空间（即 c:out 之外）并保留 fname/lname 内的空间（即 c:out 返回的内容）
问题是在 Firefox 中，代码空间没有折叠，而 IE 折叠它们。到目前为止给出的代码不是这样。您是在谈论在浏览器视口中看到的渲染输出，还是在谈论在浏览器的“查看源代码”工具中看到的生成的 HTML 源代码？如果是前者，请发布 SSCCE。如果是后者，那么是工具本身为您折叠了它。
我指的是页面生成源中的空格（而不是真正呈现的浏览器输出）

标签： html css jsp jstl whitespace

【解决方案1】：

你可以用&nbsp;替换你的空格

firstName = firstName.replace(" ", "&nbsp;");

有了这个，你就不再需要你的 CSS white-space了。

【讨论】：

如果您想添加空间，这会有所帮助，但您没有。我写这篇文章的时候不知道。

【解决方案2】：

Firefox 应该折叠空格，但如果不尝试white-space-collapse: collapse;。这是一个 CSS3 属性，明确给出了你想要的行为。

编辑：等等，我很困惑。在什么情况下，在名称的各个部分之间使用超过 1 个空格是合理的？我不知道任何可以接受的人类语言。这是某种外星语言吗？

【讨论】：

我希望删除代码空间（即在 c:out 之外）并保留 fname/lname 内的空间（即 c:out 返回的内容）......所以是的，虽然听起来很奇怪，我可以在名称中包含空格...

【解决方案3】：

试试这个，

<span><c:out value="${someCondition1?firstName:''} ${someCondition2?lastName:''}"/></span>

将所有内容放在一行中。

【讨论】：

谢谢...实际上将整个代码放在一行中，即使我所拥有的也能工作......但我想更通用地解决这个问题，不同的开发人员可以使用不同的代码缩进它应该仍然可以正常工作......