CODEWITHSUNDEEP
htmlcss
Ching Ching
Ching Ching

Reputation: 1049

How can I have text wrap in a child element of an element with nowrap?

I have a problem for set word-wrap:break-word. 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.

How to make this thing work again?

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>

Upvotes: 2

Views: 1684

Answers (2)

Alohci
Alohci

Reputation: 82986

I think that maybe you just need to restore the white-space setting for the blockquotes to normal. E.g.

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/

Upvotes: 1

Samir Selia
Samir Selia

Reputation: 7065

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

Upvotes: 1

Related Questions