HTML中的不间断非空格答案

【问题标题】：Non-breaking non-space in HTMLHTML中的不间断非空格
【发布时间】：2010-09-10 17:26:20
【问题描述】：

我有一个保龄球网络应用程序，它允许逐帧输入非常详细的信息。它允许的一件事是跟踪每个球上击倒了哪些引脚。为了显示这些信息，我让它看起来像一排大头针：

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

结构是：

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

内部 div 内没有空格。如果您在常规浏览器中查看this page，它应该可以正常显示。如果你在 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;
}

P.S.：不，我不会在我的最终解决方案中盗链别人的 clear dot :)

【问题讨论】：

标签： html css internet-explorer line-breaks pocketpc

【解决方案1】：

我发现客户端上有一个设置，他们可以将视图选择为 1) 单列、2) 桌面视图和 3) 适合窗口。

根据 MSDN，默认应该是 Fit Window。但我妻子的 IE 手机默认为单列。 所以无论如何，它会将所有内容包装到一个列中。如果我切换到其他两个选项中的任何一个，它看起来都很好。

嗯，你可以用元标记来设置：

<meta name="MobileOptimized" content="320">

将页面宽度设置为 320 像素。但我不知道如何让它自动。

这不在 v4.6 之前的 BlackBerry's 上工作 - 除非用户手动更改为桌面视图，否则您会被单列卡住。对于 4.6 或更高版本，以下内容应该可以工作，但我还没有测试过：

<meta name="viewport" content="width=320">

【讨论】：

太棒了，非常感谢。对于 iPhone/iPod touch 支持，我目前正在使用以下设置：。你知道是否有另一种方法可以让黑莓正确行动吗？如果没有，我可以离开我目前的解决方案，这应该没问题。

【解决方案2】：

没有任何nobr HTML标签；不过，我不确定它的支持程度如何。
您可以在元素（图像）之间使用 CSS overflow:visible 和不间断空格，但这些行的 HTML 内容中不能有其他空格。

【讨论】：

【解决方案3】：

您可以将 img 替换为 span，并为每个 span 使用背景图片，具体取决于 CSS 类：

<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span>&nbsp;</span><span class="pin"></span>...

（我个人认为最好有四行带有p 标签而不是单个div 带有br。）

然后在 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);
}

【讨论】：

这是一个不错的方法，但如果用户关闭了 CSS，则不会优雅地降级。

【解决方案4】：

由于您要获得最大的兼容性，请考虑生成表示框架的单个图像。

如果您使用的是 PHP，您可以使用 GD 来动态创建代表帧的图像，这些图像基于您在问题中创建 HTML 时使用的相同输入。这样做的最大好处是任何可以显示 PNG 或 GIF 的浏览器都可以显示您的框架。

【讨论】：

【解决方案5】：

如果你这样做会不会更容易？

<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;
}

【讨论】：

这会阻止浏览器在其中一个 div 中插入换行符吗？

【解决方案6】：

您可以在包含的 div 中尝试 css "nowrap" 选项。

{white-space: nowrap;}

不确定支持的范围有多大。

【讨论】：

根据Qurksmode，除了IE 5 quirksmode.org/css/whitespace.html之外的所有浏览器都支持
将此标记为已接受，但需要注意的是它不适用于 IEMobile :(
有一个错字，应该是：{white-space: nowrap}（没有破折号）

【解决方案7】：

最有意义的是动态更改显示的图像：

<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>

【讨论】：

【解决方案8】：

为每一行的每个可能的排列设置单独的图像。

那只需要 30 张图片 (16+8+4+2)

【讨论】：

实际上每个引脚有 3 种可能的状态 - 第一个球被击倒，第二个球被击倒，以及未被击倒。这大大提高了要预先计算的图像数量。

【解决方案9】：

您是否尝试过为列定义宽度？喜欢<td width="123px"> 或<td style="width:123px">。也许也适用于 div ？

【讨论】：

是的，它们都设置为 width:4em, min-width:4em。每个图像都设置为 max-width:1em；调整它们的大小。

【解决方案10】：

也许这只是您可以使用表格来强制布局的一种情况。这不是最佳的，而且我知道您不应该将表格用于非表格的事物，但您可以这样做。

<table>
<tr>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;></td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><img src="Pin.jpg"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

【讨论】：

使用表格 - 那么你有两个问题:-) 这种方法迫使图像之间的空间与图像本身一样宽，这可能不是他想要的。

【解决方案11】：

使用单词连接符，U+2060（即&#x2060;）

【讨论】：

那个在我正在使用的 WM 6.1 模拟器中插入一个方形字符

【解决方案12】：

为什么不为图钉的所有可能结果提供图片？没有与浏览器的布局混淆图像就是图像

动态生成它们，缓存创建的图像以供重复使用。

【讨论】：

看页面，那会是很多图片。
2^10 = 1024 张图片？这是很多，但可以管理。带宽可能是一个问题，尤其是在移动设备上。
确实会。有10个！可能的组合，尽管有些在技术上是不可能的。实际上，它会不止于此，因为如果制作了备用图像而不是丢失图像，则会使用不同的图像

【解决方案13】：

在你的 td 标签中添加一个“nowrap”...

【讨论】：

【解决方案14】：

我可能误解了你的目标，但我认为你可以做我所做的for logos on a map。

地图背景图块被绘制，然后每个图像被告知向左浮动并给出一些有趣的边距，以便它们按照我想要的方式定位（查看源代码以了解它是如何完成的）。

【讨论】：

我不认为这会帮助我保持列足够宽以显示所有 4 张图像......会吗？我会试试的
哦，为了让它足够宽，你需要让父 div 有... style="width: Xpx;"，这会强制它有一定的宽度。

【解决方案15】：

在<td>...</td> 的同一行使用<div> 标签试试

【讨论】：

【解决方案16】：

既然您无论如何都在使用图像，为什么不即时生成代表整个布局的图像呢？您可以使用 GD 或 ImageMagick 之类的东西来解决问题。

【讨论】：

【解决方案17】：

过去，我通过将整个图像（具有适当的引脚排列）动态创建为单个图像来解决此类问题。如果您使用的是 ASP.NET，那么使用 GDI 调用很容易做到这一点。您只需使用图钉位置动态创建图像，然后作为单个图像提供给页面。消除图片中的所有对齐问题（双关语）。

【讨论】：

这是使用 GAE 构建的，我担心 CPU 配额的使用...我想我可以在生成后缓存每个图像...需要考虑的事情

【解决方案18】：

您可能需要紧跟在分号后面的实际空格

【讨论】：