html - HTML 中的不间断非空格

Question

我有一个保龄球 Web 应用程序，它允许逐帧输入非常详细的信息。它允许的一件事是跟踪每个球上哪些球瓶被击倒。为了显示此信息，我将其设置为一排别针:

o o o o
 o o o
  o o
   o

Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great... mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:

o o o
  o
o o o
 o o
  o

or

o o
o o
o o
 o
o o
 o

The structure is:

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

内部 div 中没有空格。如果你看this page在常规浏览器中，它应该可以正常显示。如果您在 IEMobile 中查看它，它不会。

有什么提示或建议吗？也许是某种  这实际上并没有添加一个空格？

---

跟进/总结

我收到并尝试了几个很好的建议，包括:

• 在服务器上动态生成整个图像。这是一个很好的解决方案，但并不能真正满足我的需要(托管在 GAE 上)，而且代码比我想写的要多一些。这些图像也可以在第一代之后缓存。
• 使用 CSS 空白声明。这是一个很好的基于标准的解决方案，但在 IEMobile View 中它惨遭失败。

我最终做了什么

*低着头咕哝着什么*

是的，没错，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.:不，我不会在我的最终解决方案中盗链其他人的明确点:)

Answer 1

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

{white-space: nowrap;}

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