在网页上“包装文本”的最佳方法是什么？

Question

我有一个HTML页面，其中列出了人物及其名称的图片。如果名称超过20个字符，我希望它显示在2行而不是一行，以避免为他们下面的人提供大量空的水平空间

确保这样做的最简单方法是什么。要明确的是，我不想在名义上分解单词，而只是分解两行中的单词。

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。