iou3344 2023-01-08 13:46 采纳率: 85.2%
浏览 35
已结题

自动换行无效了,咋回事呢?

<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>

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

  • 写回答

2条回答 默认 最新

  • 浪客 2023-01-08 15:20
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月16日
  • 已采纳回答 1月8日
  • 创建了问题 1月8日

悬赏问题

  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致