Materialise - 文本重叠 div

Question

'latest news' 列文本彼此重叠，如 jsfiddle 中所示。

我想让文本跳到一个新行。

         <div class="col s12 l3">
          <div class="col s3 l12">
            <h6 class="red-text">Latest News</h6>
            <ul class="latest-collection">
              <li class="latest-collection-item">Teswtttttttttdddddddddddt</li>
              <li class="latest-collection-item">Teswtttttttttdddddddddddt</li>
            </ul>
          </div>
          <div class="col s3 l12">
            <h6 class="red-text">Latest News</h6>
            <ul class="latest-collection">
              <li class="latest-collection-item">Teswtttttttttdddddddddddt</li>
              <li class="latest-collection-item">Teswtttttttttdddddddddddt</li>
            </ul>
          </div>
          <div class="col s3 l12">
            <h6 class="red-text">Latest News</h6>
            <ul class="latest-collection">
              <li class="latest-collection-item">Teswtttttttttdddddddddddt</li>
              <li class="latest-collection-item">Teswtttttttttdddddddddddt</li>
            </ul>
          </div>
        </div>

Answer 1

该文本不是可换行的文本，因此您可能需要将 overflow: hidden 或 word-wrap: break-word 添加到您的 class latest-collection-item

Materialise - 文本重叠 div

Materialize - text overlapping div

html

materialize