php - 在图像下方添加文本，输出取决于输入语言？

Question

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

<style type="text/css">
<!--

.figure{
display:table;
width:50px;
}
.figure.caption{
display:table-caption;
caption-side:bottom;
}

-->
</style>

这是我用来显示图像和标题的 php 代码:

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

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

这真的很有趣，因为 CSS 代码要么“工作”，要么“不起作用”，并且它不应该选择性地针对一种语言而不是另一种语言工作。 进一步测试发现，只要我的.figure标签设置为“width:50px”，中文标题就会换行，否则中文标题就会超过图像的宽度。将其更改为“width:20px”或“width:80px”对输出没有影响。删除或添加宽度属性对英文标题没有影响。 有人可以告诉我我的代码有什么问题以及如何修改它以便它适用于两种语言，或者指出一种方法使用户输入的标题不会超过图像的宽度？预先感谢您!

Answer 1

使用以下 css 作为标题文本，

{
    word-wrap: break-word;
}