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

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

Answer 2

如果您已将宽度设为td，那么您可以尝试将此属性添加到表word-wrap: break-word;并将<select ng-disabled="value" class="select-apm" ng-model="customizeForm.AppId" name="listOption" ng-options="sortOption.appid as sortOption.appname for sortOption in sortOptions" required> <option value="">{{'global.no.items.selected'|translate}}</option> 应用于您的td

Answer 3

因为外部＆＃34; div＆＃34;宽度文本描述超出图像范围。添加外部＆＃34; div＆＃34;宽度350px并为右侧空间增加一些余量。