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

我正在建设的网站有问题。我的网站上有一个导航栏，我正试图用登录用户的电子邮件地址替换菜单项“profile”。它工作正常，显示电子邮件，但唯一的问题是电子邮件（取决于电子邮件长度）对于导航栏项目来说太大。我可以用CSS或JavaScript解决这个问题吗

要将菜单项“profile”更改为电子邮件地址，我在HTML中使用了一个脚本（因此不是单独的文件）

工作原理：

• 我可以将电子邮件变量放入我的HTML中

什么不起作用：

• 电子邮件变量不可用

链接到我的网站：

您可以使用这些凭据登录：

电邮：thanksforhelping@stackoverflow.com（我故意收了一封很长的电子邮件）

密码：谢谢123

截图：

---

谢谢你的帮助

您必须将此代码放入html中。它会帮助你的。 此代码的输出是，若电子邮件太大，则会显示圆点，并且悬停时会显示完整的电子邮件

<a href="#0" id="profile" style="text-overflow: ellipsis; overflow: hidden;"
 title="thanksforhelping@stackoverflow.com">thanksforhelping@stackoverflow.com</a>

---

尝试css中的

文本溢出

属性。

text overflow

CSS属性设置向用户发送隐藏溢出内容的方式

此外，您还可以添加

title

属性，以便在鼠标悬停时显示工具提示。 下面是一个如何使用它的示例：

HTML

这里还有一些其他的方法

这可能是你的结果：

---

顺便说一句：电子邮件地址不是真实的，但可以登录…为什么要显示电子邮件地址？这个容器只有150像素宽。地址不够短。如果您需要代码方面的帮助，请提供一个。如果您不能，这个问题就离题了。@Andreas，我可以将容器更改为电子邮件+中的宽度吗。。。px？使用

css省略号

截断溢出字符

<p class="overflow-ellipsis" title="thanksforhelping@stackoverflow.com">thanksforhelping@stackoverflow.com</p>

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}