在图像下面添加文字，输出取决于输入语言？

Question

我正在尝试创建一个网站，以便用户可以上传这些图片的图片和字幕。我想格式化这些标题，以便真正长的标题不会超过图像的宽度，而是切换到线条。这是我的CSS代码：

<?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>';
}
?>

这是我的PHP代码，用于显示图像和标题：

fmt.Scanln

我测试了我的代码。令人惊讶的是，当我使用中文作为标题的语言时，文本切换线并且不超过图像的宽度，但是当我使用英文时，标题不会切换线条。这是截图：

这非常有趣，因为CSS代码要么＆＃34;工作＆＃34;或＆＃34;不起作用＆＃34;，它不应该选择性地使用一种语言而不是另一种语言。 进一步的测试表明，只要我有＆＃34;宽度：50px＆＃34;对于.figure标签，中文标题将切换行，否则中文标题将超过图像的宽度。将其更改为＆＃34;宽度：20px＆＃34;或＆＃34;宽度：80px＆＃34;对输出没有影响。删除或添加宽度属性对英文标题没有影响。 有人可以告诉我我的代码有什么问题以及如何修改它以使它适用于这两种语言，或者指出一种方式使得用户输入的标题不会超过图像的宽度？提前谢谢！

Answer 1

使用以下css作为标题文本

admno

Answer 2

正如@Shoyeb Sheikh所说，你需要word-wrap: break-word;来包装这个词。但你缺少包装单词的宽度，这是这些内容的容器宽度。所以我将width: inherit;添加到.caption并添加了img。自己检查一下这个例子。

另外：hahahaha与哈哈哈哈不同，ha ha ha ha = 哈哈哈哈 你看到了区别，因为中国哈是一个词。

https://jsfiddle.net/dalinhuang/9Lrmk9vu/1/