HTML 中不间断的非空格

StackOverflow https://stackoverflow.com/questions/93171

题

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

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 看来却惨遭失败。

我最终做了什么

低下头，咕哝着什么

是的，没错，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;
}

附注不，我不会在我的最终解决方案中热链接其他人的明确点:)

有帮助吗？

解决方案

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

{white-space: nowrap;}

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

其他提示

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

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

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

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

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

既然您无论如何都在使用图像，为什么不动态生成代表整个布局的图像呢？你可以使用类似的东西 GD 或者 图像魔术师 来做到这一点。

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

既然您要获得最大的兼容性，您是否考虑过生成代表框架的单个图像？

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

这已经在这里有一段时间了，但我刚刚经历过这个并发现了这篇文章。无论我做什么，我都无法连续显示图像。不管怎样，他们都会包裹起来。我尝试了一切。

然后我发现客户端上有一个设置，他们可以选择视图为 1) 单列、2) 桌面视图和 3) 适合窗口。根据 MSDN，默认值应该适合窗口。但我妻子的 IE 手机默认为单列。所以无论如何，它都会将所有内容包装到一个列中。如果我切换到其他两个选项中的任何一个，它看起来都很好。

好吧，你可以使用元标记来设置它：

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

将页面宽度设置为 320px。不知道怎么调到自动模式，有知道的请留言。

这在 v4.6 之前的黑莓手机上不起作用 - 除非用户手动更改为桌面视图，否则您将只能使用单列。对于 4.6 或更高版本，以下内容应该可以工作，但我尚未测试：

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

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

尝试使用 <div> 标记在同一行 <td>...</td>

我可能误解了你的目的，但我认为你可以做到我所做的 用于地图上的徽标.

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

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

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

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

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

  • 有的是 诺布尔 html标签；但不确定这是否得到了很好的支持。
  • 你可以使用CSS 溢出：可见 以及元素（图像）之间的不间断空格，但这些行的 html 中没有其他空格。

为每种可能的排列提供单独的图像 每行的.

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

您可以用 span 替换 img 并在每个 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>...

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

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

如果你这样做不是更容易吗？

<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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top