css设置文字显示一行，多余部分用省略号结尾

开发这个网站时，前端会不断进行调试，其中有一点CSS技术还是不错的，分享给大家：如图

看上图，在灰色字体中，这个字是拥有两百个字，已经是三行的内容，但全显示简要不太好看，因此选择用一行显示，然后用省略号结尾。代码如下：

们经常在检测网站加载速度的过程中，遇到了以下问题：从样式表中删除无效规则，并延迟不用于首屏内容的CSS加载，以减少网络活动消耗的不必要字节。

尽管看起来CSS文件的大小只有几KB甚至没有1 MB，但不要仅仅因为文件大小而感到困惑。所有这些事情加起来可能会使您的网站变慢，因此建议从样式表中删除未使用的CSS和无效规则，使样式表文件更精简，最小化并完善它，以便在速度较慢的连接上更快地加载。速度更快的网站更有可能获得更高的排名，因此，您应该非常非常认真地考虑网站的加载时间。

什么是未使用的CSS规则？

未使用的CSS或“无效规则”不过是未在您的网页上使用的CSS代码。如果删除此代码，它将使CSS文件更精简，更轻便，并在某种程度上帮助缩短页面的加载时间。

让我们举一个例子来理解这一点。

假设您的样式表中包含以下CSS代码

.red_highlight_box {
  padding: 10px;
  background-color: black;
  color: white;
  cursor: pointer;
  max-width: 85%;
  margin: 0 auto;
  border-bottom: 2px solid white;
  //border-radius: 10px;
  font-family: 'Secular One', Arial, Helvetica, sans-serif; 
}

上面的代码用于类名“ red_highlight_box”。您可能不会在网站的主题中使用此类，并且网站上任何现有的页面也不会使用该类。

在这种情况下，上面的代码是未使用的CSS或无效规则或“膨胀代码”。它什么也没做，只是减慢了网站速度，您绝对应该考虑一劳永逸地将其从样式表文件中删除。

请注意

注释掉未使用的CSS与完全删除它是不同的。当您注释掉未使用的CSS代码时，该代码仍然存在，并增加了文件大小。未使用的css清理的目标是减小CSS文件的文件大小，以便更快地加载，呈现在用户浏览器中。因此，不建议注释掉不必要的CSS代码，您应该从CSS文件中永久删除多余的代码。

想象一下，如果您从网站的每个页面调用了5个样式表，并且这些样式表中的每一个都充满了无效规则和代码，而这些规则和代码根本没有在您网站的HTML中使用。如果您使用廉价的模板网站，这是很正常的，因为CSS包含主题“可能”需要的所有内容。HTML模板的开发人员已经考虑了所有可能性，小部件，部分，字体，样式，背景色，因此编写了满足所有可能性的代码。

但实际上，您不会使用所有可能性。实践表明，在CSS文件中使用的所有可能性中，您将使用的可能性不到30％，因此，样式表中会有很多未使用的CSS规则，这将不必要地增加网站页面的加载时间。

使用Unused-CSS.Com从StyleSheets中删除未使用的CSS

有许多工具可用于合并CSS文件，最小化它们或从样式表中删除无效规则。但我强烈建议您使用Unused-Css.Com。实际上，它是我们删除多余CSS代码的唯一工具，而且至今还没有任何差错。我们已经在多个网站上对其进行了测试，并且得到的输出CSS文件从未出错过。

我们也尝试过Purify CSS，但是对于包含许多CSS代码的较大站点，输出的CSS文件是不正确的。一些CSS代码会从输出文件中删除，这些代码正在其他页面上使用。

进行此过程的最佳方法是不要从网站的样式表文件中手动删除未使用的CSS。因为，当您手动进行操作时，总是存在人为错误的可能性。手动检查每个类并查找在哪个页面或场景中使用它们也是非常费力。因此，我们就不要考虑手动删除多余的CSS代码了。

您需要一个在线工具，该工具将对整个网站进行爬网，考虑所有页面并仅提取每个页面中使用的CSS。一旦在整个站点的每个页面上提取了可用的CSS，它将对其进行组合，并为您提供最终的输出文件，即干净的CSS-避免肿的代码或无效规则。

这是您的操作方式。

在Unused-css.com上注册一个免费帐户。这项免费计划可让您仅清洁一个网站（最多100页）的CSS。
添加您的网站并设置扫描。他们的抓取工具将抓取您的整个网站和所有页面，因此请确保您的robots.txt或其他脚本不会以任何方式阻止抓取工具。
当他们的抓取工具完成对所有网站的抓取并优化了整个网站中使用的所有CSS文件后，您很快就会收到一封电子邮件。不用担心，所有这些文件都不会合并在一起，您可以根据自己的需要有选择地下载每个优化的CSS文件，然后决定将其与另一个文件合并。
登录到您的未使用CSS帐户，选择项目，您将在左侧栏中看到所有CSS文件。首先，在左侧边栏中，选择网站主题或HTML模板正在使用的CSS文件（该文件应位于左侧边栏底部的下方）。接下来，单击“下载CSS”，您将获得缩小的CSS文件，其中没有肿的代码或未使用的代码。
将此新的CSS文件上传到您网站的主题目录中。请勿删除原始CSS文件，而是上传此新CSS文件，然后从您的网站头部调用新的优化CSS文件。完成后，转到Google页面速度分析，然后再次运行诊断。在您的网站上使用随机页面，因为Unused-CSS.com扫描了整个网站并将所有正在使用的CSS类合并到一个文件中，所以完全没问题。您应该会看到警告– 删除未使用的CSS并从样式表中删除无效规则，这些内容不再显示在Google页面速度分析的“机会”部分下。

当然，您不必使用付费工具即可完成此操作。您可以使用Chrome开发人员工具并手动完成操作，也可以推迟未使用的CSS。

如果我的网站的主题更新怎么办？我是否必须再次删除未使用的CSS？

是的，如果您使用免费的模板，则必须一次又一次地执行此操作。这是因为当您的主题收到新的更新时，它将覆盖您的style.css文件中的代码。

这样，当主题有新更新时，它将不会覆盖没有膨胀代码的优化CSS文件。

我们的建议是不要使用免费的模板。推荐您使用定制网站，这样您就知道所有内容如何适合以及从哪个部分调用了哪些文件。

实现 HTML 压缩，可以使用 JavaScript 中的正则表达式来去除 HTML 中的空格和注释。以下是一个简单的 HTML 压缩函数：

function compressHTML(html) {
  // 去除注释
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除标签之间空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}

该函数首先使用正则表达式去除 HTML 中的注释。然后，它使用另一个正则表达式去除 HTML 中的多余空格。最后，它使用另一个正则表达式去除标签之间的空格。

为了测试该函数，您可以创建一个 HTML 文件，并在其中添加一些冗余的空格和注释。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>

然后，您可以在Node.JS中使用以下代码将 HTML 文件加载为字符串并压缩它：

// 加载 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 压缩 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);

输出是一个压缩后的 HTML 字符串，其中不包含注释或冗余空格。

或者直接在IE中测试，代码如下：

function compressHTML(html) {
  // 去除注释
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除标签之间空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>
`;
console.log(compressHTML(html));

运行效果：

在线咨询

上一篇：一周开发 6 个版本，小程序多端框架深入测评 - 程序员硬核评测
下一篇：html文件的下载，如何使用字节流，如何使用转换流

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css设置文字显示一行，多余部分用省略号结尾

什么是未使用的CSS规则？

请注意

使用Unused-CSS.Com从StyleSheets中删除未使用的CSS

如果我的网站的主题更新怎么办？我是否必须再次删除未使用的CSS？

您的项目需求