html - 在网页上“换行”的最佳方式是什么

Question

我有一个 HTML 页面，其中列出了人物及其姓名的图片。如果名称超过 20 个字符，我希望它显示在 2 行而不是 1 行上，以避免下面的人有很多空白的水平空间

确保执行此操作的最简单方法是什么。需要明确的是，我不想分解名称中的单词，而只是将单词分成两行。

Answer 1

您可以尝试将包含名称的容器的宽度设置为更小，或者添加一些填充。例如：

HTML

<div class="name">This is my name</div>

CSS

.name { width: 50px; /* or whatever value works for you */ }

Answer 2

您宁愿需要决定名称可以采用的最大宽度是多少。然后，

.boxed-name { width: ?? px;text-align: ??; }

字符计数解决方案的主要问题是它既不考虑字体系列也不考虑字体大小。这可能导致严重的分歧。此外，mmmmmmmmmmmmmmmmmmmm可能比iiiiiiiiiiiiiiiiiiii当前字体不固定时更长。