css 给文章打省略号...

在 CSS 中,可以使用省略号(ellipsis)来表示文本溢出时的处理方式,通常是在文本长度超过容器宽度时显示省略号 ...。要实现省略号效果,通常使用 text-overflow 属性,并配合其他一些样式来限制文本的显示区域。

1. 单行文本溢出省略号

  • 用法 :对于单行文本,如果内容超出了容器的宽度,可以使用 text-overflow: ellipsis; 来显示省略号。
  • 需要配合的属性
    • overflow: hidden;:隐藏超出容器的部分。
    • white-space: nowrap;:防止文本换行。
css 复制代码
.single-line-ellipsis {
  width: 200px;            /* 容器宽度 */
  white-space: nowrap;     /* 禁止换行 */
  overflow: hidden;        /* 超出隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

HTML:

html 复制代码
<div class="single-line-ellipsis">这是一个很长的文本,超出部分会显示为省略号。</div>

效果 :当文本长度超过 200px 时,超出部分会显示为 ...

2. 多行文本溢出省略号

  • 用法 :对于多行文本,如果内容超出了容器的高度并且需要显示省略号,可以使用 line-clamp 来实现(需要浏览器支持)。
  • 需要配合的属性
    • display: -webkit-box;:创建一个弹性容器。
    • webkit-line-clamp: n;:指定最多显示多少行文本。
    • webkit-box-orient: vertical;:设置容器的排列方向。
    • overflow: hidden;:隐藏超出的文本。
css 复制代码
.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 显示三行 */
  -webkit-box-orient: vertical; /* 设置排列方向为垂直 */
  overflow: hidden;            /* 隐藏超出部分 */
  height: 60px;                /* 设置容器高度 */
}

HTML:

html 复制代码
<div class="multi-line-ellipsis">
  这是一个多行文本示例,文本超出容器的部分会显示省略号。这里的文本比较长,应该会在三行后显示省略号。
</div>

效果 :当文本内容超过 3 行时,超出部分会显示为 ...

注意:

  • -webkit-line-clamp 是一个 Webkit 核心的特性,虽然被许多现代浏览器支持,但并不是所有浏览器都兼容,特别是旧版浏览器和某些非 Webkit 引擎的浏览器。
  • 对于多行省略号,使用 line-clamp 需要设置 display: -webkit-box-webkit-box-orient,这使得该功能主要适用于 Webkit 浏览器,如 Chrome、Safari 等。

通过这些方法,你可以有效地在 CSS 中为文本设置省略号,确保内容不会溢出容器并保持界面的整洁。

相关推荐
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
rannn_1113 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)4 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体