Align text below image in table

Question

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

This is a general view for my table.

And this is an enlarged version of an example of the problem I encountered

As you can see, the word “ACCOUNTING” is too large. I would like to establish that the text will be set on the border of the image, the width is 350 pixels for all my images. These are my php codes for a table if that 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 CSS 3 properties for the text spanning the 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 add these properties to your class:

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

Answer 2

If you specified the width on td, you can try this property in your table table-layout: fixed; and apply word-wrap: break-word; to your td

Answer 3

Due to the outer width of the “div,” the text description extends beyond the image. add an external width of "div" 350px and add some margin for the right space.