自动换行无效了，咋回事呢？

Question

<style>
.card-group{
margin-top: 20px;
}
.card{
display: inline-block;
}
.card-image{
width: 147px; height: auto;
}
.card-body{
padding: 10px; display: block;text-align:center;

}
.card-title{
font-size: 16px; width: 147px; line-height: 24px; padding: 0px; display: inline; border:1px solid #F00; overflow-wrap: break-word;
/*就是下面这一句，好像网上没有这一个的说明，但是浏览器都支持*/
word-break: break-word;
word-wrap: break-word;
}
</style>
<div class="card-group">
    <div class="card">
      <a href="#">
        <img class="card-image" src="https://pic.616pic.com/photoone/00/03/56/618ce2a0e76616044.jpg">
      </a>
      <div class="card-body">
        <h6 class="card-title">
          <a href="#">图片介绍图片介绍图片介绍图片介绍图片介绍图片介绍</a>
        </h6>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img class="card-image" src="https://pic.616pic.com/photoone/00/03/56/618ce2a0e76616044.jpg">
      </a>
      <div class="card-body">
        <h6 class="card-title">
          <a href="#">图片介绍图片介绍图片介绍图片介绍图片介绍图片介绍</a>
        </h6>
      </div>
    </div>
    <div class="card">
      <a href="#">
        <img class="card-image" src="https://pic.616pic.com/photoone/00/03/56/618ce2a0e76616044.jpg">
      </a>
      <div class="card-body">
        <h6 class="card-title">
          <a href="#">图片介绍图片介绍图片介绍图片介绍图片介绍图片介绍</a>
        </h6>
      </div>
    </div>
</div>

怎么让图片并排，图片的介绍文字在图片下方，但当文字超过图片宽度时，自动换行呢？

Answer 1

.card-title的display去掉或者改为其他 display: inline-block;