HTML 中不间断的非空格
我有一个保龄球 Web 应用程序，可以输入非常详细的逐帧信息。 它允许的一件事是跟踪每个球上哪些球瓶被击倒。 为了显示此信息，我使其看起来像一个引脚架：
o o 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
or
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 看来却惨败。
我最终做了什么是的
*hangs head and mumbles 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：不，我不会在我的最终解决方案中热链接其他人的清晰点:)
I have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:
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>
There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.
Any hints or suggestions? Maybe some sort of that doesn't actually add a space?
Follow-up/Summary
I have received and tried several good suggestions, including:
- Dynamically generate the whole image on the server. It is a good solution, but doesn't really fit my need (hosted on GAE), and a bit more code than I'd like to write. These images could also be cached after the first generation.
- Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.
What I ended up doing
*hangs head and mumbles something*
Yes, that's right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:
<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>
And 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.: No, I will not be hotlinking someone else's clear dot in my final solution :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（18）
您可以尝试在包含的 div 中使用 css“nowrap”选项。
不确定支持的范围有多大。
You could try the css "nowrap" option in the containing div.
Not sure how widely that is supported.
我过去通过动态地将整个图像（具有适当的引脚排列）创建为单个图像来解决此类问题。 如果您使用 ASP.NET，则通过 GDI 调用可以很容易地做到这一点。 您只需通过图钉放置动态创建图像，然后将其作为单个图像提供给页面。 消除所有对齐问题（双关语）。
I've got around this type of issue in the past by dynamically creating the entire image (with appropriate pin arrangement) as a single image. If you are using ASP.NET, this is pretty easy to do with GDI calls. You just dynamically create the image with pin placement, then serve to the page as a single image. Takes all the alignment issues out of the picture (pun intended).
为什么不为引脚的所有可能结果提供图像？ 不要搞乱浏览器的布局，图像就是图像，
动态生成它们，缓存创建的图像以供重用。
Why not have an image for all possible outcomes for the pins? No Messing with layouts for browsers an image is an image
Generate them on the fly caching the created images for reuse.
最有意义的是更改动态显示的图像：
What would make the most sense is changing out which image is displayed on the fly:
既然您无论如何都在使用图像，为什么不动态生成代表整个布局的图像呢？ 您可以使用诸如 GD 或 ImageMagick 来做到这一点。
Since you are using images anyway, why not generate an image representing the whole layout on the fly? You can use something like GD or ImageMagick to do the trick.
在您的 td 标签中添加“nowrap”...
Add a "nowrap" in your td tag...
由于您要获得最大的兼容性，请考虑生成代表框架的单个图像。
如果您使用 PHP，则可以使用 GD 动态创建表示框架的图像，该图像基于您在问题中用于创建 HTML 的相同输入。 这样做的最大优点是任何可以显示 PNG 或 GIF 的浏览器都可以显示您的框架。
Since you're going for maximum compatibility, consider generating a single image representing the frame.
If you're using PHP, you can use GD to dynamically create images representing the frames based on the same input that you would use to create the HTML in your question. The biggest advantage to doing this is that any browser which could display a PNG or GIF would be able to display your frame.
我发现客户端上有一个设置，他们可以将视图选择为 1) 单列、2) 桌面视图 和 3) 适合窗口。
根据 MSDN，默认值应该是“适合窗口”。 但我妻子的 IE 手机默认为单列。 所以无论如何，它都会将所有内容包装到一个列中。 如果我切换到其他两个选项中的任何一个，它看起来都很好。
好吧，您可以使用元标记进行设置：
将页面宽度设置为 320 像素。 但我不知道如何让它转到自动模式。
这在 v4.6 之前的 BlackBerry 上不起作用 - 您除非用户手动更改为桌面视图，否则会陷入单列状态。 对于 4.6 或更高版本，以下内容应该可以工作，但我还没有测试过：
I figured out that there is a setting on the client where they can select the view as 1) Single Column, 2) Desktop View, and 3) Fit Window.
According to MSDN, the default is supposed to be to Fit Window. But my wife's IE Mobile phone was defaulting to a Single Column. So no matter what, it would wrap everything into a single column. If I switched to any of the other two options it looked fine.
Well, you can set this with a meta tag:
will set the page width to 320 pixels. But I don't know how to make it go to auto.
This does not work on BlackBerry's prior to v4.6 - you're stuck with single column unless the user manually changes to desktop view. With 4.6 or later, the following is supposed to work, but I haven't tested it:
您可能需要紧跟在 中的分号后面的实际空格。
You might need an actual space immediately following the semi-colon in
尝试使用与
...同一行的标记Try it with the
<div>tag on the same line as<td>...</td>我可能误解了你的意图，但我认为你可以做我所做的事情 对于 a 上的徽标地图。
绘制地图背景图块，然后每个图像被告知向左浮动并给出一些有趣的边距，以便它们按照我想要的方式定位（查看源代码以了解它是如何完成的）。
I may have misunderstood what you are after but I think that you can do what I've done for logos on a map.
The map background tile is drawn then each image is told to float left and given some interesting margins so that they are positioned as I want them to be (view source to see how it's done).
使用单词连接符 U+2060（即
）Use the word joiner character, U+2060 (i.e.
)您是否尝试过定义列的宽度？ 例如
或。 也许也适用于 div ？Do you have tried to define a width for the column? Like
<td width="123px">or<td style="width:123px">. And maybe also for the div ?为每行的每种可能的排列提供单独的图像。
只需要 30 张图像 (16+8+4+2)
Have separate images for every possible arrangement of each row.
That would only require 30 images (16+8+4+2)
您可以将 img 替换为 span，并在每个 span 中使用背景图像，具体取决于 CSS 类：（
我个人认为最好使用带有
p标记的四行，而不是单个div和br。）然后在 CSS 中你可以有这样的东西：
You can replace img with span and use a background image with each span, depending on a CSS class:
(Personally I think it's better to have four lines with a
ptag instead of a singledivwithbr.)Then in CSS you can have something like this:
也许这只是您可以使用表格来强制布局的一种情况。 这不是最佳选择，我知道您不应该将表格用于非表格的内容，但您可以这样做。
Maybe this is just one case where you could use tables to enforce layout. It's not optimal, and I know you aren't supposed to use tables for things that aren't tabular, but you could do something like this.
如果你这样做不是更容易吗？
你的 CSS 将通过什么来处理对齐？
Would it not be easier if you do it like this?
Whereby your CSS would handle the alignment?