Align text under image in table

Question

I am trying to display images retrieved from a database in a table using PHP which as been successful so far. However, some of my text description are too long and are longer than the individual thumbnails.

This is the overall view for my table.

And this is a zoomed version of an example of the problem I'm facing

As you can see, the "ACCOUNTING" word is too long. I would like to set the text to be set within the image's border, the width is 350px for all my images. These are my php codes for the table if it helps.

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

You need to use 3 CSS properties to text enclosing element:

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

In your example:

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

Or, append these properites to your class:

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

Answer 2

If you have given width to td then you can try this properties to your table table-layout: fixed; and apply word-wrap: break-word; to your td