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

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 {&nbsp; overflow: hidden;&nbsp; text-overflow: ellipsis;}这里有一些其他方法 https://jsfiddle.net/api/mdn/这可能是你的结果：

Answer 2

你必须把这段代码放在你的html中。它会帮助你。此代码的输出是，如果电子邮件太大而不显示点，并且悬停时会显示完整的电子邮件。<a&nbsp;href="#0"&nbsp;id="profile"&nbsp;style="text-overflow:&nbsp;ellipsis;&nbsp;overflow:&nbsp;hidden;" &nbsp;title="[e-mail]">[e-mail]</a>