对齐表格中的图像下的文本

Question

我试图使用PHP显示从表中的数据库检索到的图像,到目前为止这是成功的.但是,我的一些文字描述太长,并且比单个缩略图更长.

这是我桌子的整体视图.

这是我正面临的问题示例的缩放版本

如您所见,"会计"字太长了.我想设置要在图像边框内设置的文本,所有图像的宽度都是350像素.如果它有帮助,这些是我的表的PHP代码.

echo "<table width = '100%' height ='100%'><tr>";
$rows_fetched = - 1;

while ($stmt->fetch()) {
    $rows_fetched++;
    if ($rows_fetched <= 2) {
        echo "<td width = '350px'height = '100%'>";
        echo "<a href='video-page.php'> <img src='$thumbnail' alt='' width='350px' height='200px'>";
        echo "<h4>$title</h4>";

        // echo "<h4> hi </h4>";

        echo "</td>";
    } else {
        echo "</tr>";
        echo "<tr>";
        echo "<td width = '350px' height ='100%' >";
        echo "<a class href='video-page.php'> <img src='$thumbnail' alt='' width='350px' height='200px'>";
        echo "<h4 class ='img-with-text'>$title</h4>";

        // echo "<h4> hi </h4>";

        echo "</td>";
        $rows_fetched = 0;
    }
}

echo "</tr></table>";

Answer 1

您需要使用3个CSS属性来文本封闭元素:

word-wrap: break-word; //Allow long words to be able 
                       //to break and wrap onto the next line:
word-break: break-all; //Break words between any two letters:
width: 350px

在你的例子中:

echo "<h4 class ='img-with-text' style='width: 350px; word-wrap: break-word; word-break: break-all;'>$title</h4>";

或者,将这些属性附加到您的班级:

.img-with-text {
  /* Your properties */
  word-wrap: break-word;
  word-break: break-all;
  width: 350px;
}