Fatal编程技术网
  • html/
  • Html 如果分辨率太小，min width和word wrap都不能帮助我正确显示内容

Html 如果分辨率太小，min width和word wrap都不能帮助我正确显示内容

html css

Html 如果分辨率太小，min width和word wrap都不能帮助我正确显示内容,html,word-wrap,css,Html,Word Wrap,Css,我正在尝试开发一个移动网站。由于分辨率可能较低，因此设计必须灵活。现在我有四项（两行两列）： xuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc

我正在尝试开发一个移动网站。由于分辨率可能较低，因此设计必须灵活。现在我有四项（两行两列）：

xuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc|

xuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

zzzzzzzzzz | xxxxxxxxx/yyyyyyyyyyyyyyyyyy|

xuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

现在，文本包含空格和斜杠，但任何时候都不会造成分词或类似的情况。我还尝试设置最小宽度，但除FF外，所有浏览器都忽略了这一点。此外，由于移动设备的分辨率较低，我不能将最小宽度设置得太高

如果窗口或分辨率太小，ZZZZZZZ/xxxxxxxx和YYYYYYYY将被放入新行。我希望两行两列的结构保持不变。文本可以换行

我怎样才能到达这里

下面是一个示例：尝试缩小浏览器窗口，看看会发生什么。我想保留初始布局（如果窗口足够大）

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>
我不知道为什么cccc/dddd上会有一个换行符，但在我的真实示例中没有。

嗯。。。您可能需要首先重新考虑HTML标记—第1行和第2行先关联吗

当分辨率变小时，它真的必须保持在2列上吗

自动换行仅适用于空格、斜杠，不适用于IE，您可以使用
­标记使中断成为可能，但这也不是每个浏览器都能解释的。更多信息（德语）

另一个解决方案是缩小字体：

为了灵活起见，最好不要固定在以下内容上：


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


/*容器周围的字体大小为10px，
CSS如下所示：*/
.集装箱{
宽度：16em；
背景：#000000；
}
.容器.元素{
宽度：8em；
浮动：左；
身高：3.6em；
线高：1.8em；
填充：0.75em0；
文本对齐：居中；
}
a.要素a{
字体大小：1.2米；
}
.要素a：链接，
.要素a：已访问{
颜色：#FEFEFE；
文字装饰：无；
}
.元素a：悬停，
.要素a：重点{
文字装饰：下划线；
}
/*如果你使用移动js框架，你肯定有一个
具有移动检测的元素类名*/
.移动式集装箱{
宽度：自动；
}
/*也可以在移动设备上设置较低或较高的字体大小*/
.流动机构{
字体大小：110%；/*如示例所示*/
}

No这些元素不相关。它们不必保留两列，但现在字体颜色在白色背景上为白色。如果布局被移动（通过低屏幕分辨率/小窗口大小），则用户无法再读取文本。我有一个背景，但这没有显示…如果我把所有元素都放在容器中，CSS是什么样子的？初始设计应在一行上有两个元素。/*容器周围的fontsize为10px，CSS如下：/.container{width:16em；}.container.element{width:8em；float:left；height:3.6em；lineheight:1.8em；padding:0.75em 0；text align:center；}.element a{font size:1.2em；}/*如果您使用移动js框架，您肯定有一个带有移动检测的html类名*/.mobile.container{width:auto；}，因此您使用em而不是px（这样更好）。我尝试了你的设计，一个元素的文本进入了另一个元素的区域。另外，我恐怕要用线的高度。特别是如果有一个单词包装，对齐就不起作用了。我认为这只适用于单行元素。是的，这里的行高可能太高了，但是不要害怕使用它，只要调整它以适应->这里有更好的文本示例吗？所以，如果你的空间不够，你应该用简短的单词。如果文本来自其他地方的标题，请考虑使用shorttitle作为额外的数据库字段。。。

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



/* 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 */
}