提问人：Chris Marasti-Georg 提问时间：9/18/2008 最后编辑：Peter MortensenChris Marasti-Georg 更新时间：8/19/2021 访问量：16508
HTML 中的不间断非空格
Non-breaking non-space in HTML
问：
我有一个保龄球 Web 应用程序，它允许非常详细的逐帧信息输入。它允许的一件事是跟踪每个球上的哪些销钉被击倒。为了显示此信息，我让它看起来像一个引脚架：
o o o o o o o o o o
图像用于表示引脚。所以，对于后排，我有四个 img 标签，然后是一个 br 标签。效果很好...主要。问题出在小型浏览器中，例如 IEMobile。在这种情况下，如果表中可能有 10 或 11 列，并且每列中可能有一个引脚架，则 Internet Explorer 将尝试缩小列大小以适合屏幕，我最终得到如下结果：
o o o o o o o o o o
或
o o o o o o o o o o
结构为：
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
内部 div 内没有空格。如果您在常规浏览器中查看此页面，它应该显示正常。如果你在IEMobile中查看它，它没有。
有什么提示或建议吗？也许是某种 这实际上没有添加空格吗？
跟进/总结
我收到并尝试了几个好的建议，包括：
- 在服务器上动态生成整个映像。这是一个很好的解决方案，但并不完全符合我的需求（托管在 GAE 上），而且代码比我想写的要多一些。这些图像也可以在第一代之后缓存。
- 使用 CSS 空格声明。这是一个很好的基于标准的解决方案，但在 IEMobile 视图中，它失败了。
我最终做了什么
*垂头丧气，嘟囔着什么*是的，没错，div 顶部有一个透明的 GIF，大小为我需要的宽度。结束代码（简化）如下所示：
<table class="game">
<tr class="analysis leave">
<!-- ... -->
<td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
<!-- ... -->
</tr>
</table>
和 CSS：
div.smallpins {
background: url(/img/lane.gif) repeat;
text-align: center;
padding: 0;
white-space: nowrap;
}
div.smallpins img {
width: 1em;
height: 1em;
}
div.smallpins img.spacer {
width: 4.5em;
height: 0px;
}
table.game tr.leave td{
padding: 0;
margin: 0;
}
table.game tr.leave .smallpins {
min-width: 4em;
white-space: nowrap;
background: none;
}
PS：不，我不会在我的最终解决方案中热链接别人的清晰点:)
答：
4赞
Paul Whelan
9/18/2008
#1
为什么不为引脚的所有可能结果提供图像呢？没有弄乱浏览器的布局，图像就是图像
即时生成它们，缓存创建的图像以供重用。
评论
0赞
Matthew Rapati
9/18/2008
看看这个页面，那将是很多图像。
0赞
Daniel Papasian
9/18/2008
2^10 = 1024 张图像？它很多，但可以管理。带宽可能是一个问题，尤其是在移动设备上。
0赞
Chris Marasti-Georg
9/18/2008
确实会。有10个！可能的组合，尽管有些在技术上是不可能的。实际上，它远不止于此，因为如果制作备用图像与错过备用图像，则使用不同的图像
1赞
Josh Stodola
9/18/2008
#2
您可能需要紧跟在分号后面的实际空格
4赞
Tim Cochran
9/18/2008
#3
我过去通过将整个图像（具有适当的引脚排列）动态创建为单个图像来解决此类问题。如果您使用的是 ASP.NET，则使用 GDI 调用很容易做到这一点。您只需动态创建具有引脚放置位置的图像，然后作为单个图像提供给页面。将所有对齐问题排除在外（双关语）。
评论
0赞
Chris Marasti-Georg
9/18/2008
这是使用 GAE 构建的，我担心 CPU 配额使用情况......我想我可以在生成后缓存每个图像......需要考虑的事情
3赞
Ferruccio
9/18/2008
#4
既然您无论如何都在使用图像，为什么不即时生成代表整个布局的图像呢？您可以使用 GD 或 ImageMagick 之类的东西来解决问题。
1赞
Chris Serra
9/18/2008
#5
尝试将标签放在同一行<div><td>...</td>
1赞
Teifion
9/18/2008
#6
我可能误解了你在追求什么，但我认为你可以做我在地图上为徽标所做的工作。
绘制地图背景图块，然后告诉每个图像向左浮动，并给出一些有趣的边距，以便它们按照我想要的方式定位（查看源代码以了解它是如何完成的）。
评论
0赞
Chris Marasti-Georg
9/18/2008
我认为这不会帮助我保持列足够宽以显示所有 4 张图像......会吗？我将尝试
0赞
Teifion
9/19/2008
哦，为了保持它足够宽，你需要让父 div 有......style=“width： Xpx;”，这将强制它为一定的宽度。
-1赞
scunliffe
9/18/2008
#7
如果你这样做不是更容易吗？
<div id="container">
<div id="row1">
<img/><img/><img/><img/>
</div>
<div id="row2">
<img/><img/><img/>
</div>
<div id="row3">
<img/><img/>
</div>
<div id="row4">
<img/>
</div>
</div>
你的CSS将如何处理对齐？
.container div{
text-align:center;
}
评论
0赞
Chris Marasti-Georg
9/18/2008
但是，这会阻止浏览器在其中一个 div 中插入换行符吗？
26赞
Ken Ray
9/18/2008
#8
您可以尝试在包含 div 中的 css “nowrap” 选项。
{white-space: nowrap;}
不确定支持的范围有多广。
评论
0赞
JacquesB
9/18/2008
根据 Qurksmode 的说法，除 IE 5 quirksmode.org/css/whitespace.html 外，所有浏览器都支持它
1赞
Chris Marasti-Georg
8/25/2009
将其标记为已接受，但需要注意的是，它不适用于 IEMobile :(
4赞
Sam Watkins
9/30/2010
有一个错别字，它应该是：{white-space： nowrap}（不带破折号）
4赞
racurry
9/18/2008
#9
最有意义的是即时更改显示的图像：
<div id="pin-images">
<img src="fivepins.jpg" />
<img src="fourpins.jpg" />
<img src="threepins.jpg" />
<img src="twopins.jpg" />
<img src="onepin.jpg" />
</div>
3赞
Gersan
9/18/2008
#10
在您的TD标签中添加“nowrap”...
1赞
Mike Dimmick
9/18/2008
#11
使用单词 joiner 字符 U+2060（即⁠)
评论
0赞
Chris Marasti-Georg
9/18/2008
那个在我使用的 WM 6.1 模拟器中插入了一个方块字符
0赞
Kibbee
9/18/2008
#12
也许这只是您可以使用表格来强制布局的一种情况。这不是最佳的，我知道你不应该对非表格的东西使用表格，但你可以做这样的事情。
<table>
<tr>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> ></td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
评论
0赞
JacquesB
9/18/2008
使用表格 - 那么你有两个问题：-）这种方法迫使图像之间的空间与图像本身一样宽，这可能不是他想要的。
2赞
zorantula
9/18/2008
#13
由于您要获得最大的兼容性，因此请考虑生成表示帧的单个图像。
如果您使用的是 PHP，则可以使用 GD 根据您在问题中创建 HTML 时使用的相同输入动态创建表示框架的图像。这样做的最大好处是，任何可以显示PNG或GIF的浏览器都可以显示您的框架。
1赞
Michel
9/18/2008
#14
您是否尝试过为列定义宽度？喜欢或 .也许也用于 div ？<td width="123px"><td style="width:123px">
评论
0赞
Chris Marasti-Georg
9/18/2008
是的，它们都设置为 width：4em、min-width：4em。每个图像都设置为 max-width：1em;来调整它们的大小。
1赞
Michel
9/19/2008
#15
您可以将 img 替换为 span，并在每个 span 中使用背景图像，具体取决于 CSS 类：
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
（我个人认为最好有四行带有标签，而不是一行带有 .pdivbr
然后在 CSS 中，你可以有这样的东西：
p.smallpins {
margin: 0;
padding: 0;
height: 11px;
font-size: 1px;
}
p.smallpins span {
width: 11px;
background-image: url(nopinsmall.gif);
background-repeat: ...
background-position: ...
}
p.smallpins span.pin {
background-image: url(pinsmall.gif);
}
评论
0赞
Chris Marasti-Georg
9/19/2008
这是一个很好的方法，但如果用户关闭了 CSS，则不会优雅地降级。
1赞
Tyler
9/19/2008
#16
- 没有任何 nobr HTML 标签;不过，我不确定这得到了多少支持。
- 您可以在元素（图像）之间使用 CSS overflow：visible 和不间断空格，但不能在 HTML 内容中使用其他空格来表示这些行。
1赞
Sam Hasler
9/19/2008
#17
为每行的每个可能的排列提供单独的图像。
这只需要 30 张图像 （16+8+4+2）
评论
0赞
Chris Marasti-Georg
9/20/2008
实际上，每个球都有 3 种可能的状态 - 在第一个球上被击倒，在第二个球上被击倒，以及没有被击倒。这大大增加了要预先计算的图像数量。
2赞
DanDuran
12/31/2008
#18
我发现客户端上有一个设置，他们可以在其中选择视图作为 1） 单列、2） 桌面视图和 3） 适合窗口。
根据MSDN的说法，默认值应该是适合窗口。但是我妻子的IE手机默认为单列。因此，无论如何，它都会将所有内容包装到一列中。如果我切换到其他两个选项中的任何一个，它看起来都很好。
好吧，你可以用一个元标记来设置它：
<meta name="MobileOptimized" content="320">
将页面宽度设置为 320 像素。但我不知道如何让它变成自动。
这在 v4.6 之前的 BlackBerry 上不起作用 - 除非用户手动更改为桌面视图，否则您将只能使用单列。在 4.6 或更高版本中，以下内容应该可以工作，但我还没有测试过：
<meta name="viewport" content="width=320">
评论
0赞
Chris Marasti-Georg
1/2/2009
太棒了，非常感谢。对于 iPhone/iPod touch 支持，我目前正在使用此设置：<meta name=“viewport” content=“width = device-width”>。你知道我是否还有另一种方法可以告诉黑莓正确行动吗？如果没有，我可以保留我当前的解决方案，这应该没问题。
评论