CSS容器=空白：nowrap，孩子=自動換行：斷行

Question

我在設置自動換行時遇到問題：斷字

所以，這是我的代碼：

div {
    width:100%;
    white-space:nowrap; 
    overflow-x:scroll;
    overflow-y:hidden;
}
blockquote {
    width:200px;
    display:inline-block;
    word-wrap:break-word;
}

<div>
     <blockquote>balbalbalbalbalbablbalbalblbablblaabssddsdsblamlksdkdsllksdlskssdfsd</blockquote>
     <blockquote>balbalbalbalbalbablbalbalblbablblaabssddsdsblamlksdkdsllksdlskssdfsd</blockquote>
     <blockquote>balbalbalbalbalbablbalbalblbablblaabssddsdsblamlksdkdsllksdlskssdfsd</blockquote>
</div>

結果使此div顯示scroll-x。

但是，問題在於blockquote元素不再設計斷字了，而是朝着正確的方向堆疊。

看一下這個 ：

http://jsfiddle.net/hirume88/ctx3jbm1/

如何使這件事再次起作用？

Answer 1

刪除white-space:nowrap; 來自div樣式。

div {
    width:100%;
    overflow-x:scroll;
    overflow-y:hidden;
}

工作小提琴

更新

要並排放置blockquote並水平查看，請移除width:200px; 從blockquote

更新小提琴

Answer 2

我不能完全確定我理解您要執行的操作，但是我認為也許您只需要將blockquotes的空白設置恢復為normal 。 例如

 div { width:100%; white-space:nowrap; overflow-x:scroll; overflow-y:hidden; } blockquote { width:200px; display:inline-block; word-wrap:break-word; white-space:normal; } 

 <div> <blockquote>balbalbalbalbalbablbalbalblbablblaabssddsdsblamlksdkdsllksdlskssdfsd</blockquote> <blockquote>balbalbalbalbalbablbalbalblbablblaabssddsdsblamlksdkdsllksdlskssdfsd</blockquote> <blockquote>balbalbalbalbalbablbalbalblbablblaabssddsdsblamlksdkdsllksdlskssdfsd</blockquote> </div> 

或參見http://jsfiddle.net/5f6zuxy3/