Question

使用我的浏览器缩放功能放大和缩小时，有时文字会在其他元素上生成，其中一个例子是制作列时。

HTML

<div id="columnContainer">
    <div class="column">
        SingleWord <br/>
        Long Word <br/>
        Word
    </div>
    <div class="column">
        Even Longer Word <br/>
        Word <br/>
        Word
    </div>
</div>

的CSS

#columnContainer{
    padding: 0.5em;
    margin: 0 auto;
}
.column {
    float: left;
    width: 20%;
    margin: 0;
}

Fiddle。尝试放大（ctrl和+/-），你会看到＆＃34; SingleWord＆＃34;走出专栏并进入下一个专栏。为了获得更好的展示率，请将border: 2px solid black;添加到.column。

我怎样才能使列a）拉伸以适应内容而不管缩放级别如何，b）当放大到足够远时，其他列的内容不会进入另一列。我不希望分割线条（例如，＆＃34;长词＆＃34;一旦放大就会分成两个单词，当我不喜欢这个时），我不会＃39;我希望事情超出他们定义的约束条件。

Answer 1

虽然您已为.column的{{1}}提供了宽度。根据{{1}}元素的宽度，它的宽度为20%。对于上述问题，您可以尝试20%

parent

Answer 2

对缩放“免疫”的一个CSS功能是视口单元（vw，vh，vmin和vmax）。这些在现代浏览器中得到支持，对于较旧的浏览器，您可以获得垫片：http://html5polyfill.com/。这是一个小提琴：http://jsfiddle.net/8hQP2/。

#columnContainer{
    padding: 0.5em;
    margin: 0 auto;
    font: normal 2.8vh/1.2 Sans-Serif;
}

列中的文本重叠;列之间的力间距？

2 个答案: