Question

我正在一个项目上，想要对每个包含缩略图和一些文本的单元进行无限水平滚动。我的大部分工作都在进行中。但是，我无法包装文字。 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/

Answer 1

只需添加 h3 { white-space: normal }。 .container的子代继承了white-space: nowrap，从而导致了问题。 html中的另一个问题是h3中的span，它是无效的。您不应该在内联元素中使用块元素。您可以将其更改为div的样式display: inline

无限滚动div中自动换行的CSS问题

1 个答案: