Неразрывный без пробела в HTML - PullRequest
Новая
       26

Неразрывный без пробела в HTML

8 голосов
/ 18 сентября 2008

У меня есть веб-приложение для боулинга, которое позволяет вводить довольно подробную покадровую информацию. Он позволяет отслеживать, какие штифты были сбиты на каждом шаре. Для отображения этой информации я выгляжу как стойка с булавками: 

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, это не так.

Любые советы или предложения? Может быть, что-то вроде & nbsp; это на самом деле не добавляет пробел?

<Ч />

Followup / Резюме

Я получил и попробовал несколько хороших предложений, в том числе:

  • Динамически генерировать все изображение на сервере. Хорошее решение, но на самом деле не соответствует моим потребностям (размещено на GAE) и немного больше кода, чем я хотел бы написать. Эти изображения также могут быть кэшированы после первого поколения.
  • Использовать объявление пустого пространства CSS. Хорошее решение на основе стандартов, с треском проваливается в представлении IEMobile.

Что я в итоге сделал

висит голова и что-то бормочет

Да, все верно, прозрачный GIF-файл в верхней части div, размером с нужную мне ширину. Код завершения (упрощенно) выглядит так: 

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

p.s. Нет, я не буду ссылаться на чью-то четкую точку в моем окончательном решении :))

Ответы [ 18 ]

0 голосов
/ 18 сентября 2008

Вы можете заменить 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>...

(лично мне кажется, лучше иметь 4 строки с тегом 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);
}
0 голосов
/ 18 сентября 2008

Вы пытались определить ширину столбца? Как <td width="123px"> или <td style="width:123px">. А может быть и для div?

0 голосов
/ 18 сентября 2008

Может быть, это всего лишь один из случаев, когда вы могли бы использовать таблицы для реализации макета. Это не оптимально, и я знаю, что вы не должны использовать таблицы для вещей, которые не являются табличными, но вы могли бы сделать что-то подобное. 

<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>
0 голосов
/ 18 сентября 2008

Используйте символ присоединения слова, U + 2060 (т.е. &#x2060;)

0 голосов
/ 18 сентября 2008

Вам может понадобиться фактический пробел сразу после точки с запятой в

0 голосов
/ 18 сентября 2008

Попробуйте с тегом <div> в той же строке, что и <td>...</td>

0 голосов
/ 18 сентября 2008

Возможно, я неправильно понял, что вы ищете, но я думаю, что вы можете сделать то, что я сделал для логотипов на карте .

Фоновый фрагмент карты рисуется, затем каждому изображению говорят, что он плавает влево и имеет некоторые интересные поля, чтобы они располагались так, как я хочу (см. Исходный код, чтобы увидеть, как это делается).

0 голосов
/ 18 сентября 2008

Не будет ли проще, если вы сделаете это так? 

<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;
}
Страница:
...