I'm trying to create a website such that users can upload images and captions of those images. I want to format those captions such that really long captions will not exceed the width of the image, but instead switch to lines. This is my CSS code:
<style type="text/css">
<!--
.figure{
display:table;
width:50px;
}
.figure.caption{
display:table-caption;
caption-side:bottom;
}
-->
</style>
and this is my php code to display images and captions:
<?php
include('db.php');
$result = mysql_query("SELECT * FROM photos");
while($row = mysql_fetch_array($result))
{
echo '<div class="figure">';
echo '<img src="'.$row['location'].'">';
echo '<p class="caption">'.$row['caption'].' </p>';
echo '</div>';
}
?>
I tested my code. Surprisingly, when I used Chinese as the language for the caption, the text switch lines and does not exceed width of image, but when I used English, the caption does not switch lines. This is the screenshot:
This is really interesting because a CSS code either "work" or "does not work", and it shouldn't selectively work for one language over the other. Further testings reveal that as long as I have "width:50px" for the .figure tag, the caption in Chinese will switch lines, otherwise the caption in Chinese will exceed width of the image. Changing it to "width:20px" or "width:80px" has no impact on the output. Deleting or adding properties of width has no impact on the caption in English. Can someone tell me what's wrong with my code and how to revise it such that it will work for both languages, or point out a way such that a caption entered by user will not exceed width of the images? Thank you in advance!
