多个标签块显示 超过制定长度显示省略号 加上tooltip 标签块样式保持一致

在一个网页设计或UI开发场景中，如果你需要展示一系列标签（例如文章摘要、项目列表或博客标题），当标签内容超过预设的字符数时，通常会采用文本截断的方式，显示“…”（省略号）并附带鼠标悬停时的工具提示（tooltip）。这种做法能保持界面简洁，同时提供足够的信息供用户了解详情。

具体实现步骤如下：

1. **HTML结构**：
使用`<span>`或`<div>`等元素作为标签容器，添加自定义CSS类名，如`.tag-item`，以便统一样式：

   <ul class="tag-list">
     <li class="tag-item">
       <a href="#" title="这是长标签内容">这是简短描述...</a>
     </li>
     <!-- 更多标签 -->
   </ul>

2. **CSS样式**：
- 设置基础样式，包括字体大小、颜色和行高，确保所有标签一致性：

   .tag-item {
     display: inline-block;
     max-width: 200px; /* 预设的最大宽度 */
     overflow: hidden;
     text-overflow: ellipsis; /* 文本溢出隐藏，显示省略号 */
     white-space: nowrap; /* 保持单词不换行 */
     position: relative; /* 添加定位为了后续 tooltip 的相对位置 */
   }

3. **Tooltip实现**：
- 可以使用 CSS 或 JavaScript + HTML 的组合来创建 tooltips。这里以纯CSS为例，利用伪元素 `::before` 和 `::after` 显示 tooltip：

   .tag-item:hover::before,
   .tag-item:focus::before {
     content: attr(title);
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     background: #000;
     color: #fff;
     padding: 4px 8px;
     border-radius: 4px;
     opacity: 0.9;
     white-space: normal;
     z-index: 100;
     visibility: visible;
     transition: all 0.2s ease-in-out;
   }

   .tag-item:hover::after,
   .tag-item:focus::after {
     content: "";
     position: absolute;
     width: 0;
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-bottom: 6px solid #000;
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
     transition: all 0.2s ease-in-out;
   }