CODEWITHSUNDEEP
htmlcssionic-framework
Федор Усаков
Федор Усаков

Reputation: 1255

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?

You can see that text under images is freaking out

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>

Upvotes: 0

Views: 1133

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 1

Related Questions