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

Posted 2023-03-06

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

【英文标题】：How to reduce the width of the lengthy data in html css without affecting the data with smaller length?

【发布时间】：2018-12-10 08:52:22

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

请提供Minimal, Complete, and Verifiable example。请看指南how do I ask a good question?

@AndrzejZiółek 我知道我没有以正确的方式问这个问题。，现在我很着急，所以我以这种方式问。请帮助我

【参考方案1】：

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

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

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

【参考方案2】：

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

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

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

【讨论】：

我这边不允许有按钮。我只需要将冗长的电子邮件地址包装在一个屏幕中，而不会超出当前视图

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

我该怎么做？.. 我问你这个问题的原因是，我对这个有角度的 css nd html 完全陌生。所以请进一步指导我

【参考方案3】：

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