Ни min-width, ни word-wrap не помогают мне правильно отображать контент, если разрешение слишком маленькое.

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

______________ ________ x ______ ________________< /em>_

ccccccccccc / ддддддддд | аааааааааа / bbbbbbbbbbb |

______________ ________ x ______ ________________< /em>_

ззззззззз | хххххххххх / гггггггггггггггггггг |

______________ ________ 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 есть перенос слов, но в моем реальном примере его нет.


html css word-wrap
person testing    schedule 25.01.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

Автоматический перенос слов идет только по пробелам, по косой черте не в 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 */
}
person Thomas Fellinger    schedule 25.01.2012
comment
Нет, элементы не связаны. Они не должны оставаться в два столбца, но теперь цвет шрифта белый на белом фоне. Если макет перемещается (из-за низкого разрешения экрана/маленького размера окна), пользователь больше не может читать текст. У меня есть фон, но он не отображается ... - person testing; 25.01.2012
comment
Как будет выглядеть CSS, если я помещу все элементы в контейнер? Первоначальный дизайн должен состоять из двух элементов в ряду. - person testing; 25.01.2012
comment
/* размер шрифта вокруг .container равен 10px, CSS будет следующим:*/ .container{ width:16em; } .container .element{ ширина:8em; плыть налево; высота: 3,6 см; высота строки: 1,8 см; заполнение: 0,75em 0; выравнивание текста: по центру; } .элемент a{ размер шрифта: 1,2 em; } /* если вы используете мобильный js-фреймворк, у вас наверняка есть html-имя класса с определением мобильных устройств */ .mobile .container{ width: auto; } - person Thomas Fellinger; 26.01.2012
comment
Таким образом, вы используете em вместо px (это лучше). Я попробовал ваш дизайн здесь, и текст одного элемента попадает в область другого элемента. Кроме того, я боюсь использовать высоту строки. Особенно, если есть перенос слов, выравнивание больше не работает. Я думаю, что это работает только для однострочных элементов. - person testing; 27.01.2012
comment
да, может быть, высота строки здесь слишком велика, но не бойтесь ее использовать, просто адаптируйте ее по размеру --› у вас есть лучшие примеры текста, которые будут здесь использоваться? поэтому, если у вас меньше места, у вас должны быть короткие слова. если текст исходит из заголовка где-то еще, подумайте о том, чтобы иметь короткий заголовок в качестве дополнительного поля базы данных... - person Thomas Fellinger; 27.01.2012