Fatal编程技术网
  • html/
  • HTML中的非中断非空格

HTML中的非中断非空格

html css internet-explorer

HTML中的非中断非空格,html,css,internet-explorer,line-breaks,pocketpc,Html,Css,Internet Explorer,Line Breaks,Pocketpc,我有一个保龄球web应用程序，它允许非常详细的逐帧信息输入。它允许的一件事是跟踪每个球上被击倒的球钉。为了显示此信息，我将其设置为一个管脚机架： o o o o o o o o o o p、 不，我不会在我的最终解决方案中热链接其他人的透明点：）为什么不为所有可能的引脚结果创建一个图像？不要弄乱浏览器的布局图像就是图像 动态生成它们，缓存创建的图像以供重用。您可能需要一个实际的空间紧跟在分号之后。我过去通过将整个图像（具有适当的插针排列）动态创建为单个图像来解决这类问题。如果您使用的

我有一个保龄球web应用程序，它允许非常详细的逐帧信息输入。它允许的一件事是跟踪每个球上被击倒的球钉。为了显示此信息，我将其设置为一个管脚机架：

o o o o o o o o o o
p、 不，我不会在我的最终解决方案中热链接其他人的透明点：）

为什么不为所有可能的引脚结果创建一个图像？不要弄乱浏览器的布局图像就是图像

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

您可能需要一个实际的空间紧跟在分号之后。

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

既然您仍在使用图像，为什么不动态生成表示整个布局的图像？你可以用类似或的东西来做这个把戏。

试一下，把
标记放在
的同一行。
我可能误解了你的意图，但我认为你可以做我所做的

绘制地图背景平铺，然后告诉每个图像向左浮动，并给它们一些有趣的边距，以便它们按我所希望的位置放置（查看源代码以了解其操作方式）。

如果这样做会不会更容易

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”选项

{空白：nowrap；}
不确定支持的范围有多广。

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

.container div{
  text-align:center;
}
在您的td标签中添加一个“nowrap”…

使用joiner字符U+2060（即
⁠；
）

也许这只是您可以使用表来强制布局的一种情况。这不是最优的，我知道你不应该使用表格来处理非表格的事情，但是你可以这样做

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


>
既然您要实现最大的兼容性，您是否考虑过生成表示帧的单个图像

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

您是否尝试过为列定义宽度？例如
或
。对于div？

您也可以使用span替换img，并在每个span中使用背景图像，具体取决于css类：

<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>
  • 有html标签；不过，不确定这是否得到了很好的支持
  • 您可以在元素（图像）之间使用cssoverflow:visible和不间断空格，但在html中不能为这些行使用其他空格
每行的每种可能排列都有单独的图像

这只需要30张图片（16+8+4+2）

这已经在这里出现了一段时间，但我刚刚浏览了这篇文章，找到了这篇文章。无论我做了什么，我都无法获得连续的图像。不管怎样，它们都会包起来。我什么都试过了

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

好的，你可以用一个元标记来设置它：

<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>...
将页面宽度设置为320px。不知道如何让它去自动，如果有人知道，请张贴

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

<meta name="MobileOptimized" content="320">
看看页面，会有很多图像。2^10=1024个图像？这是很多，但可以管理。带宽可能是一个问题，尤其是在移动设备上。它确实会。有10个！可能的组合，虽然有些在技术上是不可能的。事实上，这将是更多的，因为不同的形象是使用不同的，如果一个备用与missed这是建立使用GAE，我担心的CPU配额使用。。。我想我可以一代一代地缓存每个图像。。。需要考虑的是，这是否可以防止浏览器在其中一个div中插入换行符？根据Qurksmode，除IE 5外，所有浏览器都支持它，并将其标记为已接受，但需要注意的是，它不适用于IEMobile：（有一个拼写错误，应该是：{white space:nowrap}（不带破折号）在WM 6.1 emulator中插入一个方形字符我正在使用一个表-然后你有两个问题：-）这种方法强制图像之间的空间与图像本身一样宽，这可能不是他想要的。是的，它们都设置为宽度：4em，最小宽度：4em。图像均设置为最大宽度：1米；我不认为这会帮助我保持足够宽的列来显示所有4幅图像。。。会吗？我会努力的，为了让它足够宽，你需要有家长部门有。。。style=“width:Xpx；”，这将强制其具有一定的宽度。这是一种很好的方法，但如果用户关闭CSS，则不会优雅地降级。每个pin实际上有3种可能的状态-在第一个球上击倒、在第二个球上击倒和不击倒 
.container div{
  text-align:center;
}

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

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

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

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

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