Adding text below image, output depends on input language? - php

Question

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!

Answer 1

use the following css for the caption's text,
{
word-wrap: break-word;
}

Answer 2

As #Shoyeb Sheikh said you need word-wrap: break-word; to wrap the word. but you are missing the width to wrap the word which is the container width for those content. So I added width: inherit; to .caption and also added for img. check the example yourself.
also: hahahaha is not same as 哈哈哈哈, ha ha ha ha = 哈哈哈哈
you see the difference, because Chinese 哈 is a word.
https://jsfiddle.net/dalinhuang/9Lrmk9vu/1/