Question

我正在尝试使用以下代码创建一个简单的两列设计，带有两个内联块<div>：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
body, html { 
   margin: 0;
}

#outer {
    background: #F00;
    padding-top: 10px;
}

.col {
    display: inline-block;
    width: 50%;
    background: #00F;
    margin-top: 10px;
    vertical-align: top;
}
</style>
</head>
<body>
    <div id="outer">
        <div class="col">
            Lorem ipsum dolor sit amet
        </div><!--
        --><div class="col">
            consectetur adipiscing elit.
        </div>
</div>
</body>
</html>

但是，我遇到了Opera Mobile（Opera Classic）的问题。该浏览器默认启用了一个名为“文本换行”的设置。关闭时，页面会根据需要呈现：

Displaying correctly

但是，启用此功能后，它将显示如下：

Displaying incorrectly

有没有办法使用HTML或CSS覆盖此功能？

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

尝试此元标记

Answer 2

我通过将white-space: nowrap;添加到#wrap元素并将white-space: normal;添加到.col类来解决了这个问题。我猜Opera Mobile将divs解释为'textual'，因为它们是内联块。

如何覆盖Opera Mobile中的“文本换行”

2 个答案: