水平溢出到下一個內聯div的文本

在內聯顯示多個div時，是否可以使文本水平溢出（並越過）下一個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/

來源

2014-01-15 swelet

是，添加此

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

如果您想要給div2一個相對位置，請確保div1的z-index高於div2的z-index。

demo here

來源

2014-01-15 10:11:25 Leon

添加position: relative和white-space: nowrap;您div1。指定段落文本將永遠不會換行：

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

來源

2014-01-15 10:16:34

有在這裏

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/

來源

2014-01-15 10:29:32

水平溢出到下一個內聯div的文本

回答

相關問題