Question

我想在一个具有绝对定位的容器中将两个div放在一起。在chrome和IE中它工作正常，但在Firefox（版本42）中，文本意外地包装。看到这个小提琴：https://jsfiddle.net/b5gqveo4/。

<!doctype html>
<html lang="en">

<head>
    <style>

        .container {
            position:absolute;
            left:100px;
            top: 100px;
        }

        .float-left {
            float: left;
            width: 20px;
            border: 1px solid blue;
        }

        .text {
            padding: 3px;
            overflow: hidden;
            border: 1px solid red;
        }

    </style>
</head>

<body>

    <div class="container">
        <div class="float-left">&nbsp;</div>
        <div class="text">text here wraps in firefox but not chrome</div>
    </div>


</body>
</html>

添加空白区域：nowrap;不起作用。这导致在Firefox中删除最后一个单词。此外，我希望文本在它太长而不适合的情况下换行。

为什么它包装在Firefox中，我该如何防止这种情况？

感谢。

Answer 1

如果您想确保文字没有换行，请将white-space: nowrap;添加到.text容器。

Answer 2

你有两个选择：

将Container div的宽度设置为更长：300px或100％等......
您可以设置样式：white-space：带有类文本的div的nowrap（不适用于容器div）。在您的示例中，因为您没有为.text div设置宽度，如果white-space是nowrap，那么文本将隐藏，因为你的风格是：溢出：隐藏。你可以删除溢出隐藏的CSS .text以便看清楚

如何防止div中的文本位置：绝对不包含在Firefox中？

2 个答案: