电子邮件地址对于导航栏来说太大了

Question

我正在构建的网站有问题。我的网站上有一个导航栏，我正在尝试用登录用户的电子邮件地址替换菜单项“配置文件”。它工作得很好，显示了电子邮件，但唯一的问题是电子邮件（取决于电子邮件长度）对于导航栏项目来说太大了。我可以在 CSS 或 JavaScript 中解决这个问题吗？要将菜单项“配置文件”更改为电子邮件地址，我在 HTML 中使用了一个脚本（因此不是单独的文件）什么工作：我可以将电子邮件变量放入我的 HTML什么不起作用：电子邮件变量不是链接到我的网站：https://runes-smart-home.web.app您可以使用这些凭据登录：电子邮件：[e-mail]（我特意写了一封很长的电子邮件）密码：Thanks123！截图：

Answer 1

试试text-overflowcss中的属性。该text-overflowCSS属性设置如何隐藏溢出内容被通知给用户。

此外，您可以添加一个title属性以在鼠标悬停时显示工具提示。这是一个如何使用它的示例：

HTML

<p class="overflow-ellipsis" title="[e-mail]">[e-mail]</p>

CSS

.overflow-ellipsis {

  overflow: hidden;

  text-overflow: ellipsis;

}

这里有一些其他方法 https://jsfiddle.net/api/mdn/

这可能是你的结果：

Answer 2

你必须把这段代码放在你的html中。它会帮助你。此代码的输出是，如果电子邮件太大而不显示点，并且悬停时会显示完整的电子邮件。

<a href="#0" id="profile" style="text-overflow: ellipsis; overflow: hidden;"
 title="[e-mail]">[e-mail]</a>