HTML5概述
HTML5是一种具有革命性的技术，因为它对Web开发方式的变化有着深远的影响。它是最新版本的HTML，用来构建更加优雅、交互性强的Web应用程序和网站。（以下内容摘自 https://www.w3schools.com/html/html5_intro.asp）
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
摘要的定义
摘要是指在有限的文字空间中，针对一篇文章或一段文字，通过提取其主题或精华而简明扼要地概括其内容的一种文字形式。在HTML5中实现摘要非常简单，下面我们将详细讲解。
如何在HTML5中显示给定元素的摘要？
方法一：使用CSS截断
我们可以使用CSS的“截断文本”属性来创建一个截断显示的元素，并用JavaScript动态地将内容添加到其中。这个截断的元素只显示部分内容，然后添加“阅读更多”，用户可单击该链接查看完整文本。下面是代码片段：
<!DOCTYPE html>
<html>
<head>
<style>
#truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h2>示例标题</h2>
<p id="truncate"></p>
<script>
var text = "This is a long text that needs to be truncated. It has a lot of important information that we want to display, but we don't want to take up too much space on the page.";
var truncatedText = text.substring(0, 100);
document.getElementById("truncate").innerHTML = truncatedText + "..." + "<a href='#'>Read More</a>";
</script>
</body>
</html>
在上面的代码中，我们定义了一个段落元素，并给它指定了一个ID为“truncate”。然后，我们使用CSS属性截断文本，只显示部分内容。JavaScript代码从完整文本中提取了前100个字符，然后将其添加到段落元素中。最后，我们添加了一个“阅读更多”链接，这样就可以方便地查看完整文本。
方法二：使用JavaScript截断
我们可以使用JavaScript的字符串方法来截断一段文本。下面是代码片段：
<!DOCTYPE html>
<html>
<head>
<script>
function truncateText() {
var text = document.getElementById("fullText").innerHTML;
var truncatedText = text.substring(0, 100);
var elem = document.getElementById("truncatedText")
elem.innerHTML = truncatedText + "..." + "<a href='#'>Read More</a>";
}
</script>
</head>
<body>
<h2>示例标题</h2>
<p id="fullText">This is a long text that needs to be truncated. It has a lot of important information that we want to display, but we don't want to take up too much space on the page.</p>
<p id="truncatedText"></p>
<button onclick="truncateText()">Truncate</button>
</body>
</html>
在上面的代码中，我们添加了一个用于截断文本的JavaScript函数。该函数获取完整的文本，并从中提取了前100个字符。我们创建了一个段落元素，并使用innerHTML将其内容设置为截断的文本加上“阅读更多”链接。最后，我们添加了一个“Truncate”按钮，用户可单击该按钮来截断文本。
总结
HTML5是一种强大的技术，可以让我们构建更加优雅、交互性强的Web应用程序和网站。在本文中，我们介绍了两种方法来在HTML5中显示给定元素的摘要。我们可以使用CSS或JavaScript来截断文本，并在截断的元素中添加“阅读更多”链接。这种方法对于需要在有限的空间中显示大量文本的场景非常有用。