Question

当内联显示多个div时，是否可以使文本水平地进入下一个div（及其上方）？

示例：

HTML：

<div class="div1">I want the text to overflow into the red box</div>
<div class="div2"></div>

的CSS：

  div{
      float:left;
      display:inline;
      width: 200px;
      height: 18px; }

  .div1{
      background-color: grey;  }

  .div2{
       background-color: red; }

参见jsfiddle：http://jsfiddle.net/lars95/H7KvG/6/

Answer 1

是的，添加此

.div1 {
    white-space: nowrap;
    position: relative;
}

如果你想给div2一个相对位置，请确保div1的z-index高于div2的z-index。

demo here

Answer 2

将position: relative和white-space: nowrap;添加到div1。指定段落中的文本永远不会换行：

.div1{
        background-color: grey; 
        white-space: nowrap;
        position: relative;
        }

Answer 3

这里有几点需要注意

white-space: nowrap; - 当你想要段落永不包裹
将您的内容放入<p>。当你这样做时，你将对所有事情有更多的控制权
overflow visible - 由于您的<p>大于容器<div>，因此您需要允许容器显示内容
position relative + z-index。你需要这个，这样第一个容器就在第二个容器的顶部。允许显示内部内容
你不需要display: inline。浮动元素是block

所以你的代码将成为：

<div class="div1">
    <p>I want the text to overflow into the red box</p>
</div>
<div class="div2"></div>

和CSS：

div{
    float:left;
    width: 200px;
    height: 18px;
}

p {
    margin: 0;
    white-space: nowrap;
}

.div1{
    background-color: grey; 
    overflow: visible;
    position: relative;
    z-index: 1;
}

.div2{
     background-color: red;
}

更新了fidle：http://jsfiddle.net/H7KvG/8/

文本水平溢出到下一个内联div

3 个答案: