如何确保名称适合网站上的指定空间

Question

因此，我正在建立一个快速的小型网站。在网站中，当用户登录时，网站要求输入名称。在我的数据库中，我为用户名分配了VARCHAR（255），并在用户登录时将名字限制为50个字符。但是，我不知道如何确保在用户名上显示的任何名称。网站不会溢出其指定的容器。我不想使用word-wrap: break-word和overflow: auto，因为我不想破坏名称或隐藏名称的一部分。我只想确保它适合它的容器。我如何确保它适合？预先感谢。

杨

Answer 1

好吧，据我所知，如果您不想在任何情况下分拆名称或隐藏其一部分，就可以考虑以下三种替代方法：

1. 调整指定容器元素的大小，使其可以容纳最宽的50个字符串。例如，通过创建具有相同字体系列大小的<span>元素（包含50个W字符，应该是最宽字母字符中的大多数字体），可以获得良好的基准。然后在浏览器检查器中检查元素以获取最大宽度。也许最终将CSS中的宽度四舍五入，以便使容器处于安全状态，并考虑到可能减小内部宽度的任何填充物等。
2. 在需要时使用CSS或Javascript动态增加指定的容器元素的宽度。
3. 当需要使用Javascript时，使指定容器元素中的字体大小动态减小。