html - HTML中的不间断非空格

Question

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

哦哦
 哦哦
  哦
   ○

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

哦哦
  ○
哦哦
 哦
  ○

或者

哦
哦
哦
 ○
哦
 ○

结构是：

<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：不，我不会在我的最终解决方案中盗链别人的明确点:)

score 24 · Accepted Answer

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

{white-space: nowrap;}

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

score 3 · Accepted Answer

为什么不为引脚的所有可能结果提供图像？不弄乱浏览器的布局，图像就是图像

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

2

在您的 td 标签中添加“nowrap”...

于 2008-09-18T14:55:37.543 回答

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

我发现客户端上有一个设置，他们可以将视图选择为 1) Single Column、2) Desktop View和 3) Fit Window。

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

好吧，您可以使用元标记进行设置：

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

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

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

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

score 0 · Accepted Answer

0

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

于 2008-09-18T14:44:32.763 回答

score 0 · Accepted Answer

0

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

于 2008-09-18T14:48:02.100 回答

score 0 · Accepted Answer

我可能误解了你所追求的，但我认为你可以做我为地图上的标志所做的事情。

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

score 0 · Accepted Answer

0

使用单词连接符 U+2060（即⁠）

于 2008-09-18T15:06:16.067 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您可以将 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);
}

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

为每一行的每个可能的排列都有单独的图像。

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

于 2008-09-19T15:28:26.353 回答

score -1 · Accepted Answer

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

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

html - HTML中的不间断非空格

跟进/总结

我最终做了什么

18 回答 18

Related

Reference