Есть ли способ сделать перенос имени, когда информация приходит от mysql на php-сайте? - PullRequest
Новая
       63

Есть ли способ сделать перенос имени, когда информация приходит от mysql на php-сайте?

1 голос
/ 23 сентября 2019

Я строю большой сайт.Я решил сделать это с помощью базы данных.Однако теперь, когда я начал, я обнаружил, что названия фотографий слишком велики.Есть ли способ заставить их оборачиваться под картинку, чтобы они не были такими длинными?Я использую PHPmyAdmin для базы данных и PHP в Dreamweaver CS5.5 для кодирования.

Вот изображение, показывающее текущие имена.

Here is a picture to show you the current names.

Мне нужно сделать вот так.

I need it to do like this one.

Вот текущий код: 

  <?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);
?>

1 Ответ

1 голос
/ 24 сентября 2019

Вы должны немного изменить свою разметку.Добавьте некоторый класс к элементу <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>
...