无限滚动 div 中的 CSS 自动换行问题
发布于2024-11-25 13:06 阅读(1023) 评论(0) 点赞(7) 收藏(4)
我正在做一个项目，想让每个包含缩略图和一些文本的单元格实现无限水平滚动。我基本上已经完成了所有工作。但是，我无法让文本换行。css 和 html 如下。滚动框中的前两个项目包含应该换行的文本，但溢出了。
这是样式（单元格 2 仅用于演示交替背景颜色）：
.container {
display: flex;
flex-direction: row;
padding: 10px;
height: 10%;
overflow-x: auto;
white-space: nowrap;
}
.cell {
background: #818181;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
}
.cell2 {
background: #f44336;
flex: fit-content;
padding: 10px;
width: 220px;
height: 8%;
display: inline-block;
}
.data {
justify-content: center;
word-wrap: break-word;
}
<div>
<h2>Scroll Test</h2>
<div class="container">
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here that will over flow</h3></span>
</a>
</div>
<div class="cell">
<a href= "#">
<span class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"></span>
<span class="data"> <h3>Some text here</h3></span>
</a>
</div>
<div class="cell2">
<a href= "#">
<div class="data"> <img src="http://roncabeanz.com/Roncabeanz/images/CoffeeIcon.jpg" width="200px"> </div>
<div class="data"> <h3>Some text here</h3></div>
</a>
</div>
<?php } ?>
</div>
</div>小提琴链接： https: //jsfiddle.net/jonathannah/3rxcktpm/29/
解决方案
只需添加。继承h3 { white-space: normal }的子元素会导致问题。您的 html 中的另一个问题是内部的，这是无效的。您不应该在内联元素内使用块元素。您可以将其更改为 并为其赋予样式.containerwhite-space: nowraph3spandivdisplay: inline
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/536158/91f94d4da137f864136c/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力