如何在不影响长度较小的数据的情况下减少html css中冗长数据的宽度？

Question

我在我的 Angular 5 移动应用程序中显示了一些用户详细信息姓名、电话号码、手机号码、电子邮件等。

这些细节是从回复中得到的..，我用来滑动查看每个成员的信息。我

我正在使用表格标签标签在表格单元格中显示每个成员的信息成员的信息（无论如何，表格在应用程序的屏幕中将不可见）。现在我面临的问题是

我从回复中收到了一些冗长的电子邮件地址（例如，abcdefghijklmnopqrsrsrsr@gmail.comabcdefghijklmnopqrsrsrsr@gmail.com，即超过 23 个字符）因为它太长了......，它不适合单曲查看，查看；它正在穿过屏幕并触摸其他成员的详细视图。

如果我尝试 word-wrap: break-word for email email，它也会破坏所有的小电子邮件地址。（例如，arunprs@gmail.comarunprs@gmail.com）。现在我只需要破坏冗长的电子邮件地址。而不是小的电子邮件地址。

小电子邮件地址应按原样显示。我该怎么做？请朋友们帮帮我..，非常感谢。

Answer 1

我已经在我的项目中使用过，像这样：

h4{
    display:inline-block;
    white-space: normal;
    align-items:center;
    min-width:200px;
}

或者您可以使用 textarea，如果您想将 textarea 视为输入类型，那么您可以更改其外观。

Answer 2

我想写出一个函数或类似的函数来改变与电子邮件长度成比例的字体大小，或者可以显示电子邮件的前 5 个字母并有一个按钮来显示其余字母（作为最后的手段）。

编辑（在word-break 想法之后）：

关于word-break: break-all;，我建议使用 jQuery（如果还没有的话！）来计算一个“最佳”长度数（我想像 23 个字符）所以：if length > 23 then add css-property word-break: break-all;

Answer 3

您可以使用 word-break: break-all; CSS 属性。它只会破坏长度较长的电子邮件地址，并保持短电子邮件完好无损。