css 如何在一个带有nowrap的元素的子元素中进行文本换行？

yftpprvb 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(212)

我有一个问题，设置字换行：断字。结果使这个div显示scroll-x。但问题是blockquote元素不再样式断字，它堆叠到正确的方向。
怎么才能让这东西重新工作？

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>

css

来源：https://stackoverflow.com/questions/33968755/how-can-i-have-text-wrap-in-a-child-element-of-an-element-with-nowrap

2条答案

按热度按时间

tpxzln5u1#

我想你可能只需要将blockquotes的空格设置恢复为normal。

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/

赞(0）回复(0）举报 2023-02-01

piwo6bdm2#

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

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

- 一个
- 更新**

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

- 第一个e第一个f第一个x

赞(0）回复(0）举报 2023-02-01

我来回答

css 如何在一个带有nowrap的元素的子元素中进行文本换行？

2条答案

相关问题

热门标签

最新问答