如今，越来越多的网站依赖JavaScript来提供交互。虽然JavaScript可以提供愉快的体验，但它也有一些缺点：页面加载时间更长；在加载并纠正JavaScript之前，无法使用页面；团队需要足够的手段和资源来专注于可用性、响应性和可访问性。鉴于这些缺点，我们可以依赖浏览器提供的原生解决方案，这不仅可以降低成本，还可以享受社区创建的Web标准专业知识的优势。通常，这些解决方案的代码密集度较低，因此它们还减少了开发团队的维护工作（例如，无需更新使用的库）。在本文中，让我们探讨一些可供大多数用户使用的本机解决方案。我会举一些例子，但不会详述所有细节。渲染被JavaScript阻塞在介绍各种技巧之前，首先需要提醒大家使用JavaScript的一大缺点：浏览器只有一个线程来控制页面的渲染。运行JavaScript时，浏览器会延迟用户交互事件和界面更新。这很烦人，因为你会觉得页面没有响应你的操作，或者动画会感觉卡住了。谷歌工程师PhilipWalton详细阐述了这个优化，如果你有兴趣，可以看看：https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/Developmentteam日常工作偏爱功能强大的设备，因此JavaScript的负面影响可能会被掩盖。但不要忘记对功能有限的设备进行定期测试。限制显示的行数JavaScript版本以下是在JavaScript中执行此操作的两种方法：限制显示的字符数。这种方法很容易出错，因为除等宽字体外，字体通常具有可变宽度。结果，最终显示的文本通常比预期的要长，或者中途被截断。试验元素显示的内容，直到达到理想的行数。这是昂贵的，因为每次尝试都需要浏览器在看到显示的内容之前完成渲染。并且这种技术只能在使用指定字体渲染后才能得到准确的结果，这可能会导致较大的布局偏移。当页面包含大量需要截断的文本时，页面显示会延迟。此外，这两种解决方案都会完全截断文本，可能会影响搜索引擎或辅助技术的恢复。页面上元素的字体大小或宽度也可能发生变化。考虑所有情况很麻烦。Native-webkit-line-clamp是原生CSS属性。十年前在Safari中引入，今天被广泛使用，其他浏览器出于兼容性原因采用它，并且它是一个标准。您需要一些其他前缀属性来实现所需的行为。虽然使用带前缀的属性有点烦人，但前缀在标准中有详细记录，所以这样做没有风险。除了IE和Firefox68之前的版本，所有浏览器都支持该属性，下面举例说明具体用法。HTML：
