当前位置: 首页 > article >正文

【css】CSS 文本溢出显示省略号

单行文本

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <body>
    <div class="text">单行文本显示省略号</div>
  </body>
</html>
  • 使用white-space属性设置不换行、overflow属性隐藏超出部分,text-overflow属性添加省略号。需注意必须有固定宽度才会出现效果。
  1. white-space属性 用来设置如何处理元素中的空白。
  2. overflow属性 定义当一个元素的内容太大而无法适应时,块级格式化上下文如何处理。它是 overflow-x 和 overflow-y的简写属性 。
  3. text-overflow属性 确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...')或显示一个自定义字符串。

多行文本显示省略号

<!DOCTYPE html>
<html lang="en">
  <style>
    .text {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  </style>
  <body>
    <div class="text">单行文本显示省略号多行文本显示省略号行文本显示省略号</div>
  </body>
</html>

  • 多行文本主要是把white-space属性修改为使用-webkit-line-clamp,限制在一个块元素显示的文本的行数来实现的。
  1. display: -webkit-box 设置div为弹性伸缩盒子模型。
  2. -webkit-line-clamp 可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient属性设置成 vertical 时才有效果。
  3. -webkit-box-orient 用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的,使用时需要注意兼容性。

http://www.kler.cn/a/377137.html

相关文章:

  • 如果你的网站是h5网站,如何将h5网站变成小程序-除开完整重做方法如何快速h5转小程序-h5网站转小程序的办法-优雅草央千澈
  • Excel 面试 01 “Highlight in red the 10 lowest orders”
  • 【Spring】详解(上)
  • echarts没有map地图解决方案
  • HTML5适配手机
  • Spring Security3.0.2版本
  • 【STM32】INA3221三通道电压电流采集模块,HAL库
  • Linux-计算机网络-探索epoll是同步阻塞的还是异步非阻塞的
  • 将一个文件夹存放到 GitHub 已有仓库
  • 在网卡属性里面更改IP地址后的IP和用ipconfig输出的IP不一致
  • 2-3-4树的层序打印
  • Android R S T U版本如何在下拉栏菜单增加基本截图功能
  • 小北的字节跳动青训营与LangChain系统安装和快速入门学习(持续更新中~~~)
  • 「C/C++」C/C++ 之 变量作用域详解
  • 【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理
  • 项目一:使用 Spring + SpringMVC + Mybatis + lombok 实现网络五子棋
  • 快速入门并学习Vue.js
  • 用unity XR interaction Toolkit 制作垃圾分类虚拟仿真项目
  • mongodb 按条件进行备份和恢复
  • Windows版 nginx安装,启动,目录解析,常用命令
  • 单调队列—————力扣239题
  • C++11标准模板(STL)- 常用数学函数 - 浮点数操作函数 - 检查给定数是否具有有限值(std::isfinite)
  • 从三方云服务器将数据迁移至本地,如何保障安全高效?
  • solidity中的继承
  • 质数的小游戏~(牛客,cf)
  • 《机器人SLAM导航核心技术与实战》第1季:第10章_其他SLAM系统