当信息来自 php 站点上的 mysql 时，有没有办法进行名称换行？

Question

我正在建设一个大型网站。我决定使用数据库来制作它。然而，现在我开始了，我发现图片的名字太大了。有没有办法让它们包裹在图片下面，这样它们就不会那么长？我在数据库中使用 PHPmyAdmin，在 Dreamweaver CS5.5 中使用 PHP 进行编码。

这是一张图片，向您展示当前的名字。

我需要它来做这个。

这是当前代码：

  <?php do { ?>
  <ul>
  <li><a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>"><img src="img/<?php 
echo $row_Master['Img']; ?>"/>
<br>
<?php echo $row_Master['Name']; ?></a></li>
  </ul>
  <?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>
  </div>
  <?php
mysqli_free_result($Master);
?>

Answer 1

您必须稍微更改一下标记。添加一些 class 到 <ul> 元素（如 'items' 或如您所愿）并在 <span> 元素中添加一个名称：

<?php do { ?>
  <ul class="items">
    <li>
     <a href="details.php?recordID=<?php echo $row_Master['Master_ID']; ?>">
       <img src="img/<?php echo $row_Master['Img']; ?>"/>
       <span><?php echo $row_Master['Name']; ?></span>
     </a>
   </li>
  </ul>
<?php } while ($row_Master = mysqli_fetch_assoc($Master)); ?>

并添加一些样式：

<style>
    .items {
        display: flex;
        flex-wrap: wrap;
    }
    .items li {
        width: 100px; /* set your item width here */
        margin: 10px;
    }
    .items li a {
        display: flex;
        flex-direction: column;
    }
    .items li a img {
        max-width: 100%;
    }
    .items li a span {
        text-align: center;
    }
</style>

这是一个结果示例：

.div {
  width: 600px;
}

.items {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.items li {
  width: 100px; /* set your item width here */
  margin: 10px;
}
.items li a {
  display: flex;
  flex-direction: column;
}
.items li a img {
  max-width: 100%;
}
.items li a span {
  text-align: center;
}

<div class="div">
  <ul class="items">
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="https://via.placeholder.com/100" alt="">
        <span>the photo large title example</span>
      </a>
    </li>
  </ul>
</div>

当信息来自 php 站点上的 mysql 时，有没有办法进行名称换行？

Is there a way to make a name wrap when the information is coming from mysql on a php site?

html

css

word-wrap