CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示

最新推荐文章于 2025-05-16 09:48:22 发布

原创

最新推荐文章于 2025-05-16 09:48:22 发布 · 1.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

在这里插入图片描述

HTML 结构解析

文档结构:
- <ul class="con">: 一个无序列表，包含多个列表项。
  - 每个 <li class="wrap"> 表示一个列表项，内部有两个 <span> 元素：
    - <span class="txt">: 显示文本内容。
    - <span class="title">: 显示带有 title 属性的文本内容，鼠标悬停到此元素时会显示titile提示。

CSS 样式解析

全局样式:
- .con:
  - font-size: 14px;: 字体大小为 14 像素。
  - color: #666;: 文字颜色为灰色。
  - width: 600px;: 宽度为 600 像素。
  - margin: 50px auto;: 上下边距为 50 像素，左右居中。
  - border-radius: 8px;: 圆角边框。
  - padding: 15px;: 内边距为 15 像素。
  - overflow: hidden;: 超出部分隐藏。
  - resize: horizontal;: 可以水平调整大小。
  - box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;: 添加阴影效果。
- .wrap:
  - position: relative;: 相对定位。
  - line-height: 2;: 行高为 2。
  - height: 2em;: 高度为 2 倍字体大小。
  - padding: 0 10px;: 左右内边距为 10 像素。
  - overflow: hidden;: 超出部分隐藏。
  - background: #fff;: 背景颜色为白色（注释掉了）。
  - margin: 5px 0;: 上下边距为 5 像素。
- .wrap:nth-child(odd):
  - background: #f5f5f5;: 奇数行背景颜色为浅灰色。
- .title:
  - display: block;: 块级元素。
  - position: relative;: 相对定位。
  - background: inherit;: 继承父元素背景。
  - text-align: justify;: 文本两端对齐。
  - height: 2em;: 高度为 2 倍字体大小。
  - overflow: hidden;: 超出部分隐藏。
  - top: -4em;: 向上偏移 4 倍字体大小。
  - word-break: break-all;:字符可任意断行
- .txt:
  - display: block;: 块级元素。
  - max-height: 4em;: 最大高度为 4 倍字体大小。
- .title::before:
  - content: attr(title);: 插入 title 属性的内容。
  - width: 50%;: 宽度为 50%。
  - float: right;: 右浮动。
  - white-space: nowrap;: 不换行。
  - overflow: hidden;: 超出部分隐藏。
  - text-overflow: ellipsis;: 超出部分显示省略号。
  - direction: rtl;: 文本方向从右到左。
  - background: green;: 背景颜色为绿色。
  - text-align: justify;: 文本两端对齐。

功能解析

文本溢出处理:
- 使用 overflow: hidden; 和 text-overflow: ellipsis; 处理文本溢出，超出部分显示省略号。
- 使用 ::before 伪元素插入 title 属性的内容，并设置样式使其在右侧显示。
列表项样式:
- 列表项交替背景颜色，奇数行背景为浅灰色，偶数行为默认背景色。
- 列表项的高度和内边距设置使得内容整齐排列。
阴影效果:
- 列表容器 .con 使用 box-shadow 添加阴影效果，增强视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content<