De Non-rupture de la non-espace en HTML

J'ai un bowling application web qui permet assez détaillée, image par image, la saisie d'informations. Une chose qu'il permet le suivi des pins ont été renversés sur chaque balle. Pour afficher cette information, je la faire ressembler à un rack de broches:

o o o o 
o o o 
o o 
o

Les Images sont utilisées pour représenter les pattes. Ainsi, pour la rangée arrière, j'ai 4 balises img, puis une balise br. Fonctionne très bien... la plupart du temps. Le problème est dans les petits navigateurs, tels que IEMobile. Dans ce cas, où il y a 10 ou 11 colonnes dans une table, et il peut y avoir un rack de broches dans chaque colonne, c'est à dire va essayer de réduire la taille de la colonne par rapport à l'écran, et je me retrouve avec quelque chose comme ceci:

o o o 
o 
o o o 
o o 
o

ou

o o 
o o 
o o 
o 
o o 
o

La structure est:

<tr>
    <td>
        <!-- some whitespace -->
        <div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
        <!-- some whitespace -->
    </td>
</tr>

Il n'y a pas d'espace à l'intérieur de l'intérieur de la div. Si vous regardez cette page dans un navigateur, il doit afficher bien. Si vous regardez dans IEMobile, il ne le fait pas.

Tous conseils ou des suggestions? Peut-être une sorte de &nbsp; qui ne fait pas ajouter un espace?

Suivi/Sommaire

J'ai reçu et essayé plusieurs bonnes suggestions, y compris:

  • Générer dynamiquement l'ensemble de l'image sur le serveur. Bonne solution, mais n'est pas vraiment adapté à mon besoin (hébergé sur GAE), et un peu plus de code que je voudrais écrire. Ces images peuvent également être mis en cache après la première génération.
  • Utiliser les CSS white-space déclaration. Bonne base de standards la solution, échoue lamentablement dans le IEMobile vue.

Ce que j'ai fini par faire

pend la tête et marmonne quelque chose

Oui, c'est vrai, un gif transparent en haut de la div, de la taille de la largeur dont j'ai besoin. Le code de fin (simplifié) ressemble à:

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

Et 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. Non, je ne vais pas être le hotlinking de quelqu'un d'autre point très clair dans ma dernière solution 🙂

OriginalL'auteur Chris Marasti-Georg | 2008-09-18

  1. 24

    Vous pouvez essayer de la css "nowrap" option dans le div contenant.

    {white-space: nowrap;}

    Pas sûr de la façon largement pris en charge.

    Selon Qurksmode, il est pris en charge par tous les browsersers sauf IE 5 quirksmode.org/css/whitespace.html
    Ce marquage comme acceptées, avec la mise en garde qu'il ne fonctionne pas pour IEMobile 🙁
    il y a une faute de frappe, il fallait lire: {white-space: nowrap} (sans le tiret)
    corrigé la faute de frappe

    OriginalL'auteur Ken Ray

  2. 3

    J'ai autour de ce type de problème dans le passé en créant dynamiquement l'ensemble de l'image (disposition des broches) comme une seule image. Si vous utilisez ASP.NET, c'est assez facile à faire avec des appels GDI. Vous venez de créer dynamiquement l'image avec la broche de placement, puis servir à la page comme une image unique. Prend tous les problèmes d'alignement de l'image (pun intended).

    Ceci est construit à l'aide de GAE, et je suis inquiet à propos de l'utilisation des quotas de CPU... je suppose que je pourrais le cache de chaque image après génération... quelque Chose à penser

    OriginalL'auteur Tim Cochran

  3. 3

    Pourquoi ne pas avoir une image de tous les résultats possibles pour les broches? Pas de Déconner avec les mises en page pour les navigateurs d'une image est une image

    Les générer à la volée de la mise en cache les images créées pour la réutilisation.

    En regardant la page, ce serait beaucoup d'images.
    2^10 = 1024 images? C'est beaucoup, mais gérable. La bande passante est peut-être un sujet de préoccupation, surtout sur les appareils mobiles.
    Il serait en effet. Il y a 10! combinaisons possibles, même si certains sont techniquement à peu près impossible. En fait, il serait plus que cela, car une image différente est utilisée si une pièce de rechange est faite vs manquer

    OriginalL'auteur Paul Whelan

  4. 3

    Ce qui ferait le plus de sens est de changer l'image qui s'affiche à la volée:

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

    OriginalL'auteur racurry

  5. 2

    Puisque vous utilisez des images de toute façon, pourquoi ne pas générer une image représentant l'ensemble de la mise en page à la volée? Vous pouvez utiliser quelque chose comme GD ou ImageMagick de faire le tour.

    OriginalL'auteur Ferruccio

  6. 2

    Ajouter un "nowrap" dans votre balise td...

    OriginalL'auteur

  7. 1

    Puisque vous allez pour un maximum de compatibilité, avez-vous pensé à générer une seule image représentant l'image?

    Si vous êtes à l'aide de PHP, vous pouvez utiliser GD pour créer dynamiquement des images représentant les images basé sur la même entrée que vous utilisez pour créer le code HTML dans votre question. Le plus grand avantage est que n'importe quel navigateur qui pourrait afficher un PNG ou GIF serait capable d'afficher votre image.

    OriginalL'auteur

  8. 1

    Ce qui a été ici pendant un certain temps, mais j'étais juste en passant par ce et trouvé ce post. Peu importe ce que j'ai fait, je ne pouvais pas obtenir des images d'aller dans une rangée. N'importe quoi, ils s'enroulent. J'ai tout essayé.

    Puis j'ai compris qu'il y a un réglage sur le client qui permet de sélectionner la vue que 1) une Seule Colonne, 2) Vue du Bureau, et 3) Adapter la Fenêtre. Selon MSDN, la valeur par défaut est censé être pour s'adapter à la fenêtre. Mais ma Femme IE de téléphone Mobile à la suite de la défaillance d'une Seule Colonne. DONC, peu IMPORTE CE que, il serait tout envelopper dans une seule colonne. Si je suis passé à l'un des 2 autres options il avait l'air bien.

    Bien, vous pouvez le faire avec une balise meta:

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

    va définir la largeur de la page à 320px. Ne sais pas comment le faire aller à l'auto, si il ya quelqu'un sait, merci de poster.

    Cela ne fonctionne PAS sur blackberry avant v4.6 - vous êtes coincé avec une seule colonne, sauf si l'utilisateur modifie manuellement à la vue du bureau. Avec 4,6 ou plus tard, la suite est supposé fonctionner, mais je n'ai pas testé:

    <meta name="viewport" content="width=320">
    Génial, merci beaucoup. Pour l'iPhone/iPod touch, je suis actuellement à l'aide de ce paramètre: <meta name="viewport" content="width = device-width">. Savez-vous si il existe un autre moyen que je peux dire que les mûres à agir correctement? Si non, je peux laisser ma solution actuelle, qui devrait être ok.

    OriginalL'auteur

  9. 0

    Vous pourriez avoir besoin d'un espace réel, immédiatement après le point-virgule dans  

    OriginalL'auteur Josh Stodola

  10. 0

    Essayer avec le <div> tag sur la même ligne que <td>...</td>

    OriginalL'auteur Chris Serra

  11. 0

    J'ai peut-être mal compris ce que vous êtes après, mais je pense que vous pouvez faire ce que j'ai fait pour les logos sur une carte.

    La carte d'arrière-plan la tuile est établi chaque image est dit à flotter à gauche et donné quelques intéressantes marges de sorte qu'ils sont positionnés comme je veux qu'ils soient (afficher la source pour voir comment c'est fait).

    Je ne pense pas que cela m'aiderait à garder la colonne assez large pour afficher tous les 4 images... serait-il? Je vais essayer
    Oh, pour le garder assez large, vous devez avoir le div parent... style="width: Xpx;", qui va le forcer à être d'une certaine largeur.

    OriginalL'auteur Teifion

  12. 0

    Utiliser le mot menuisier caractère U+2060 (c'est à dire &#x2060;)

    Que l'on insère un carré de caractère dans le WM 6.1 émulateur que j'utilise

    OriginalL'auteur Mike Dimmick

  13. 0

    Peut-être que c'est juste un cas où vous pouvez utiliser des tableaux pour appliquer la mise en page. Ce n'est pas optimal, et je sais que vous n'êtes pas censé utiliser des tableaux pour des choses qui ne sont pas des tableaux, mais vous pourriez faire quelque chose comme cela. 

    <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>
    Utiliser une table - ensuite, vous avez deux problèmes 🙂 Cette approche des forces de l'espace entre les images afin d'être aussi large que les images elles-mêmes, ce qui n'est probablement pas ce qu'il veut.

    OriginalL'auteur Kibbee

  14. 0

    Avez-vous essayé de définir une largeur pour la colonne? Comme <td width="123px"> ou <td style="width:123px">. Et peut-être aussi pour la div ?

    oui, ils sont à la fois définir la largeur:4em, min-width:4em. Les images sont chaque ensemble de max-width:cadratin (1 em; à la taille.

    OriginalL'auteur Michel

  15. 0
    • Il y a le nobr balise html; vous ne savez pas comment bien pris en charge c'est bien.
    • Vous pouvez utiliser css overflow:visible et les espaces insécables entre vos éléments (images), mais pas d'autres espaces dans le code html de ces lignes.

    OriginalL'auteur Tyler

  16. 0

    Avoir des images séparées pour chaque arrangement possible de chaque ligne.

    Qui n'aurait besoin que de 30 images (16+8+4+2)

    Il y a en fait 3 états possibles pour chaque pin - renversé sur la première balle, renversé sur le deuxième ballon, et de ne pas tomber. Qui augmente le nombre d'images pré-calculées par un bon morceau.

    OriginalL'auteur Sam Hasler

  17. 0

    Vous pouvez remplacer img avec durée et d'utiliser une image d'arrière-plan à chaque travée, selon une classe 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>...

    (personnellement, je pense que c'est mieux d'avoir 4 lignes avec une balise p au lieu d'un seul div avec br)

    Le CSS, vous pouvez avoir quelque chose comme ceci :

    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);
}
    C'est une belle approche, mais ne se dégrade pas normalement si, par exemple, un utilisateur a CSS désactivée.

    OriginalL'auteur Michel

  18. -1

    Ne serait-il pas plus facile si vous le faites comme ça?

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

    Lequel votre CSS serait en mesure de gérer l'alignement?

    .container div{
  text-align:center;
}
    Serait-ce de garder le navigateur de l'insertion d'un saut de ligne à l'intérieur de l'un des divs?

    OriginalL'auteur scunliffe