Ни минимальная ширина, ни перенос слов не помогают мне правильно отображать контент, если разрешение слишком мало - PullRequest
Новая
       0

Ни минимальная ширина, ни перенос слов не помогают мне правильно отображать контент, если разрешение слишком мало

1 голос
/ 25 января 2012

Я пытаюсь разработать мобильный сайт.Поскольку разрешение может быть низким, дизайн должен быть гибким.Теперь у меня есть четыре элемента (две строки с двумя столбцами):

__ _ __ _ __ _ __ _ __ _ __ _ __ _ _ x _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _

ccccccccccc / ddddddddddd |aaaaaaaaaa / bbbbbbbbbbb |

__ _ __ _ __ _ __ _ __ _ __ _ __ _ _ x _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _

zzzzzzzzzzzz |xxxxxxxxxx / ггггггггггггггг *

__ _ __ _ __ _ __ _ __ _ __ _ __ _ _ x _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _

Теперь текст содержит пробелы и косую черту, но ни разу не разрывает слово или что-то в этом роде.Я также пытался установить минимальную ширину, но кроме FF каждый браузер игнорирует это.Также я не могу установить слишком низкую минимальную ширину из-за низкого разрешения мобильных устройств.

zzzzzz / xxxxxxxx и yyyyyyyyy помещаются в новую строку, если окно или разрешение слишком маленькое.Я хочу, чтобы структура из двух строк с двумя столбцами оставалась там.Текст можно обернуть.

Как мне этого достичь?

Вот пример: http://jsfiddle.net/85PZW/ Попробуйте уменьшить размер окна браузера и посмотрите, что произойдет.Я хочу сохранить первоначальный макет (если окна достаточно большие).

HTML 

<div class="SubpageMenu">
            <div class="row">
                <div class="element first">
                    <a href="#">cccccccccc/ ddddddddddddddddddd</a>
                </div>
                <div class="element">
                    <a href="#">aaaaaa / bbbbb</a>
                </div>
            </div>
            <div class="row">
                <div class="element first">
                    <a href="#">zzzzzzzzzzzzzzz</a>
                </div>
                <div class="element">
                    <a href="#">xxxxxxxx / yyyyyyy</a>
                </div>
            </div>
        </div>

CSS 

body{
 background-color:#000000;   
}

.SubpageMenu .row{
    border-bottom: 2px solid #FFFFFF;
    background-repeat: repeat-x;
    height: 43px;

}

.SubpageMenu .row .element{
    width: 49%;
    float: left;
    text-align: center;
    height: 43px;
    display: table;
}

.SubpageMenu .row  .element.first{
    border-right: 2px solid #FFFFFF;
}

.SubpageMenu a{
    font-size: 1.2em;
    color: white;
    width: auto;
    max-width: 100%;
    min-width: 160px;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

Я не знаю, почему в cccc / dddd есть перенос слов, но в моем реальном примере его нет.

1 Ответ

0 голосов
/ 25 января 2012

Хммм ... Возможно, вы захотите сначала переосмыслить свою HTML-разметку - сначала связаны первая строка и первая строка вместе?

Когда разрешение становится меньше, оно действительно должно оставаться на 2 столбцах?1003 *

Автоматическая перенос по словам выполняется только в пробелах, при использовании косых черт не в IE, вы можете использовать разметку &shy;, чтобы сделать возможным разрыв, но это также не интерпретируется каждым браузером.Подробнее об этом на selfhtml (немецкий).

Другое решение - уменьшить шрифт:

Для большей гибкости лучше не фиксировать эти строки: 

<div class="container">
  <div class="element first">
    <a href="#">cccccccccc/ ddddddddddddddddddd</a>
  </div>
  <div class="element">
    <a href="#">aaaaaa / bbbbb</a>
  </div>
  <div class="element">
    <a href="#">zzzzzzzzzzzzzzz</a>
  </div>
  <div class="element last">
    <a href="#">xxxxxxxx / yyyyyyy</a>
  </div>
</div>

CSS: 

/* the fontsize around the .container is 10px, 
the CSS would be as follows:*/

.container{
  width:16em;
  background:#000000;
}
.container .element{
  width:8em;
  float:left;
  height:3.6em;
  line-height:1.8em;
  padding:0.75em 0;
  text-align:center;
}
.element a{
  font-size:1.2em;
}
.element a:link,
.element a:visited{
  color:#FEFEFE;
  text-decoration:none;
}
.element a:hover,
.element a:focus{
  text-decoration:underline;
}


/* if you use a mobile js framework you surely have a 
<html> element class name with mobile detection */

.mobile .container{
  width: auto;
}

/* it's also possible to set a lower or higher font-size at a mobile device */

.mobile body{
  font-size:110%; /* just as example */
}
...