Adding text below image, output depends on input language?
I am trying to create a website so that users can upload images and subtitles of these images. I want to format those titles so that the really long titles don't go over the width of the image, and 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 for displaying images and titles:
<?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 checked my code. Surprisingly, when I used Chinese as the title for the title, the text switches line and do not exceed the image width, but when I used English the caption does not switch lines. This is a screenshot:
This is really interesting because CSS code "works" or "doesn't work" and it shouldn't selectively work for one language over another. Further tests show that as long as I have "width: 50px" for the .figure tag, the Chinese caption will switch lines, otherwise the Chinese caption will exceed the image width. Changing it to "width: 20px" or "width: 80px" does not affect the output. Removing or adding width properties does not affect the English signature. Can anyone tell me what is wrong with my code and how to revise it so that it works in both languages, or provide a way to make sure the title entered by the user does not exceed the width of the images? Thank you in advance!
source to share
As @Shoyeb Sheikh said you need word-wrap: break-word;
to wrap this word. but you don't have enough width to wrap the word, which is the width of the container for that content. So I added width: inherit;
in .caption
and also added for img. check the example yourself.
also: is hahahaha
not the same as 哈哈哈哈
, ha ha ha ha
= 哈哈哈哈
you see the difference because Chinese 哈 is a word.
source to share