[英]CSS container = white-space:nowrap, children = word-wrap:break-word
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. 结果使此div显示scroll-x。
but, the problem is blockquote element not styling break-word anymore, it's stacking to the right direction. 但是,问题在于blockquote元素不再设计断字了,而是朝着正确的方向堆叠。
check this out : 看一下这个 :
http://jsfiddle.net/hirume88/ctx3jbm1/ http://jsfiddle.net/hirume88/ctx3jbm1/
how to make this thing work again? 如何使这件事再次起作用?
Remove white-space:nowrap;
删除
white-space:nowrap;
from styling of div
. 来自
div
样式。
div {
width:100%;
overflow-x:scroll;
overflow-y:hidden;
}
Update 更新
To place blockquote
side by side and view it horizontally, remove width:200px;
要并排放置
blockquote
并水平查看,请移除width:200px;
from blockquote 从blockquote
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
. 我不能完全确定我理解您要执行的操作,但是我认为也许您只需要将blockquotes的空白设置恢复为
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/ 或参见http://jsfiddle.net/5f6zuxy3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.