如何在 Opera Mobile 中覆盖“文本环绕”答案

【问题标题】：How to override 'Text wrapping' in Opera Mobile如何在 Opera Mobile 中覆盖“文本环绕”
【发布时间】：2013-07-28 20:33:53
【问题描述】：

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

<!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) 的问题。该浏览器默认启用了一个名为“文本环绕”的设置。关闭后，页面将按需要呈现：

但是，启用该功能后，它会显示如下：

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

【问题讨论】：

标签： css mobile opera mobile-browser

【解决方案1】：

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

试试这个元标记

【讨论】：

【解决方案2】：

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

【讨论】：

请注意，此解决方案并不理想，因为如果总宽度超过屏幕尺寸，我更希望 div 换行。欢迎更好的解决方案。