编辑“︁HTML省略标记”︁（章节）

= HTML省略标记 =

'''HTML省略标记'''（HTML Ellipsis）是指在网页中表示文本被截断或省略的特殊符号（通常显示为三个点"..."）。这种标记常用于空间受限的界面、内容摘要或需要隐藏部分信息的场景。

== 基本概念 ==

HTML本身并没有专门的"省略标记"元素，但开发者可以通过多种方式实现省略效果。最常见的实现方法是：
* 使用CSS的<code>text-overflow: ellipsis</code>属性
* 直接插入省略字符"…"（HTML实体为<code>&hellip;</code>）
* 通过JavaScript动态截断文本

=== Unicode与HTML实体 ===

标准省略号在Unicode中的字符是'''Horizontal Ellipsis'''（U+2026），对应的HTML实体有：
* <code>&hellip;</code> — 命名实体
* <code>&#8230;</code> — 十进制编码
* <code>&#x2026;</code> — 十六进制编码

== CSS实现方法 ==

最常用的省略技术是CSS的<code>text-overflow</code>属性，它需要配合以下属性使用：

<syntaxhighlight lang="css">
.ellipsis {
    white-space: nowrap;      /* 禁止换行 */
    overflow: hidden;         /* 隐藏溢出内容 */
    text-overflow: ellipsis;  /* 显示省略标记 */
    width: 200px;            /* 限制容器宽度 */
}
</syntaxhighlight>

'''示例：'''
<syntaxhighlight lang="html">
<div class="ellipsis">
    这是一段非常长的文本内容，当它超过容器宽度时会被截断并显示省略号...
</div>
</syntaxhighlight>

'''输出效果：'''
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; border: 1px solid #ccc; padding: 5px;">
    这是一段非常长的文本内容，当它超过容器宽度时会被截断并显示省略号...
</div>

=== 多行文本省略 ===

对于多行文本，可以使用<code>-webkit-line-clamp</code>属性（注意这是非标准属性）：

<syntaxhighlight lang="css">
.multiline-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* 限制显示行数 */
    overflow: hidden;
    width: 300px;
}
</syntaxhighlight>

== JavaScript实现 ==

当需要更复杂的控制时，可以使用JavaScript动态添加省略号：

<syntaxhighlight lang="javascript">
function truncateText(selector, maxLength) {
    const element = document.querySelector(selector);
    if (element.textContent.length > maxLength) {
        element.textContent = element.textContent.substring(0, maxLength) + '…';
    }
}
</syntaxhighlight>

== 实际应用场景 ==

=== 1. 新闻摘要 ===
新闻列表通常只显示标题和部分内容，用省略号表示有更多内容：

<syntaxhighlight lang="html">
<div class="news-preview">
    <h3>最新科技动态</h3>
    <p class="ellipsis">科学家发现了一种新型材料，这种材料具有超导特性...</p>
    <a href="#">阅读更多</a>
</div>
</syntaxhighlight>

=== 2. 表格单元格 ===
在数据表格中，过长的内容会被截断：

<mermaid>
graph TD
    A[用户数据表] --> B[ID]
    A --> C[用户名]
    A --> D[个人简介]
    D --> E[使用text-overflow: ellipsis]
</mermaid>

=== 3. 导航菜单 ===
当侧边栏宽度缩小时，菜单项可能被截断：

<syntaxhighlight lang="html">
<nav>
    <ul>
        <li class="menu-item">用户设置...</li>
        <li class="menu-item">账户信息...</li>
    </ul>
</nav>
</syntaxhighlight>

== 数学表示 ==

从数学角度看，省略可以表示为字符串截断函数：

<math>
\text{truncate}(s, n) = \begin{cases}
s_0s_1...s_{n-3}… & \text{当 } \text{length}(s) > n \\
s & \text{否则}
\end{cases}
</math>

其中：
* <math>s</math> 是原始字符串
* <math>n</math> 是最大允许长度

== 浏览器兼容性 ==

{| class="wikitable"
|+ 主要CSS属性兼容性
! 特性
! Chrome
! Firefox
! Safari
! Edge
|-
| text-overflow
| 1.0
| 7.0
| 1.3
| 12.0
|-
| -webkit-line-clamp
| 4.0
| 不支持
| 3.1
| 12.0
|}

== 最佳实践 ==

1. '''语义化优先'''：如果省略的内容对理解很重要，考虑使用<code>&lt;abbr&gt;</code>或<code>&lt;details&gt;</code>代替纯视觉省略
2. '''可访问性'''：确保屏幕阅读器能正确处理省略内容
3. '''响应式设计'''：在不同屏幕尺寸上测试省略效果
4. '''性能考虑'''：对于大量元素，CSS方案比JavaScript更高效

== 扩展知识 ==

* '''CSS4草案'''：正在考虑标准化多行文本省略方案
* '''国际化'''：某些语言（如中文）使用六个点"……"表示省略
* '''工具提示'''：常与<code>title</code>属性配合使用，鼠标悬停时显示完整内容

<syntaxhighlight lang="html">
<span title="完整的长文本内容" class="ellipsis">被截断的文本...</span>
</syntaxhighlight>

通过掌握HTML省略标记技术，开发者可以创建更专业、更适应不同屏幕尺寸的用户界面。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]