html - 如何使用 nowrap 在元素的子元素中换行？

Question

我有一个设置 word-wrap:break-word 的问题。结果让这个div显示了scroll-x。但问题是 blockquote 元素不再是 break-word 的样式，它正在向正确的方向堆叠。

如何让这个东西再次工作？

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>

Answer 1

我认为也许您只需要将 block 引用的空白设置恢复为正常。例如

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/