当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to force text to wrap inside inline-block div?

问题描述:

I'm trying to make a horizontal scrollable list in Ionic.

I don't understand why, but following solution arranges child items horizontaly only with white-space: nowrap;

I believe, because of that text below the images in the list is not wrapping.

How to make it correctly and set text width equal to image width?

CSS code:

.wide-as-needed {

overflow-x: auto;

overflow-y: hidden;

white-space: nowrap;

-webkit-overflow-scrolling: touch;

}

HTML code:

<ion-scroll direction="x" class="wide-as-needed" has-bouncing="true">

<div ng-repeat="book in books" style="margin:10px;display: inline-block;">

<img ng-src="{{book.cover || './img/noCover.png'}}" err-src="./img/noCover.png" alt="{{book.title}}"/>

<div style="max-width: 10em;">

<ul>

<li>{{book.title}}</li>

<li> {{book.author}}</li>

</ul>

</div>

</div>

</ion-scroll>

网友答案:

You can do it this way

.wrapper {
  display: table;
  margin: 25px;
}
.wrapper .caption {
  display: table-caption;
  caption-side: bottom;
  text-align: justify;
  border: 1px solid grey;
  background: darkgrey;
  padding: .25em
}
<div class="wrapper">
  <img src="http://lorempixel.com/output/food-q-c-250-250-3.jpg" alt="" />
  <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, debitis!</div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: