HTML中不间断的非空格

Question

我有一个保龄球网络应用程序,允许非常详细的逐帧信息输入.它允许的一件事是跟踪每个球被击倒的针脚.要显示此信息,我将其看作是一个针脚架:

o o o o
 o o o
  o o
   o

图像用于表示引脚.所以,对于后排,我有4个img标签,然后是一个br标签.工作得很好......主要是.问题出在小型浏览器中,例如IEMobile.在这种情况下,如果表中可能有10或11列,并且每列中可能有一个引脚架,IE将尝试缩小列大小以适应屏幕,我最终得到类似的东西:

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视图中惨遭失败.

我最终做了什么

挂着头,嘟something着什么

是的,这是正确的,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不,我不会在我的最终解决方案中将其他人的清晰点链接起来:)

Answer 1

您可以在包含div中尝试使用css"nowrap"选项.

{white-space: nowrap;}

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