CSS container = white-space:nowrap, children = word-wrap:break-word

Question

i have a problem for set word-wrap:break-word

so, this is my code :

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>

the result made this div showing scroll-x.

but, the problem is blockquote element not styling break-word anymore, it's stacking to the right direction.

check this out :

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

how to make this thing work again?

Answer 1

Remove white-space:nowrap; from styling of div .

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

Working Fiddle

Update

To place blockquote side by side and view it horizontally, remove width:200px; from blockquote

Updated Fiddle

Answer 2

I'm not altogether sure I understand what you trying to do, but I think that maybe you just need to restore the white-space setting for the blockquotes to normal . Eg

 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> 

Or see http://jsfiddle.net/5f6zuxy3/