Question

我有设置自动换行的问题：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>

结果使这个div显示了scroll-x。

但是，问题是blockquote元素不再造型破坏词，它向正确的方向堆叠。

检查一下：

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

如何让这件事再次发挥作用？

Answer 1

从white-space:nowrap;的样式中删除div。

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

<强> Working Fiddle

<强>更新

要并排放置blockquote并水平查看，请从blockquote中删除width:200px;

<强> Updated Fiddle

Answer 2

我并不完全确定我理解你想要做什么，但我认为你可能只需要将块引用的空白区域设置恢复为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>

或者查看http://jsfiddle.net/5f6zuxy3/

CSS container = white-space：nowrap，children = word-wrap：break-word

2 个答案: