HTML前端CSS实现只显示1行或者2行、3行剩余显示省略号

想要做的效果:

文本只一行显示

/**
	实现思路:
	1.设置inline-block属相
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
{
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}

文本只多行显示

/**
实现思路:
	1.超出的文本隐藏
	2.溢出用省略号显示
	3.溢出不换行
	4.将对象作为弹性伸缩盒子模型显示
	5.从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
	6.这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
  */
{
	width:200px;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/332559.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ChatGLM-6B部署和微调实例

文章目录 前言一、ChatGLM-6B安装1.1 下载1.2 环境安装 二、ChatGLM-6B推理三、P-tuning 微调3.1微调数据集3.2微调训练3.3微调评估3.4 调用新的模型进行推理 总结 前言 ChatGLM-6B ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型,基于 General Language Mo…

基于Prism框架的WPF前端框架开发《知产代理数字化解决方案》

最近新开发了一套WPF前端界面框架,叫《知产代理数字化解决方案》,采用了时下流行的Prism框架作为整个系统的基础架构,演示了Prism中的IRegionManager区域管理器、IDialogAware对话框、IDialogService对话框服务、IContainerExtension容器等用…

Python实现自动化办公(使用第三方库操作Excel)

1 使用 xlrd 读取Excel数据 1.1 获取具体单元格的数据 import xlrd# 1. 打开工作簿 workbook xlrd.open_workbook("D:/Python_study_projects/Python自动化办公/Excel/test1.xlsx") # 2. 打开工作表 sheet1 workbook.sheets()[0] # 选择所有工作表中的第一个 # …

阿里云地域和可用区分布表,2024更新

2024年阿里云服务器地域分布表,地域指数据中心所在的地理区域,通常按照数据中心所在的城市划分,例如华北2(北京)地域表示数据中心所在的城市是北京。阿里云地域分为四部分即中国、亚太其他国家、欧洲与美洲和中东&…

springcloud Ribbon负载均衡服务调用

文章目录 代码下载地址简介测试 Ribbon负载均衡算法手写RoundRobinRule源码8001/8002微服务改造80订单微服务改造测试 代码下载地址 地址:https://github.com/13thm/study_springcloud/tree/main/days6_Ribbon 简介 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端…

ora-12154无法解析指定的连接标识符

用户反映查询的时候报错ora-12154 这个系统只做历史数据查询使用,使用并不平凡,该数据库曾做过一次服务器间的迁移。 用户描述,所有oracle客户端查询该视图都报tns错误,一般ora-12154会发生在连接数据库时,因为tns配…

flutter开发windows桌面软件,使用Inno Setup打包成安装程序,支持中文

最近使用flutter开发windows桌面软件的时候,想要将软件打包成安装程序,使用了flutter官方推荐的msix打包,但是打包出来的软件生成的桌面快捷方式有蓝色背景: 这个蓝色背景应该是没有设置为动态导致的,windows系统的屏幕…

C#,字符串匹配(模式搜索)RK(Rabin Karp)算法的源代码

M.O.Rabin Rabin-Karp算法,是由M.O.Rabin和R.A.Karp设计实现的一种基于移动散列值的字符串匹配算法。 通常基于散列值的字符串匹配方法:(1)首先计算模式字符串的散列函数;(2)然后利用相同的散…

mysql数据迁移报错Specified key was too long; max key length is 767 bytes

目录 场景: 说明: 疑问: 解决: 验证: 场景: 线上项目支持的过程中遇到mysql库表结构和数据由A库迁移到B库上提示Specified key was too long; max key length is 767 bytes报错,第一次遇到特此…

每日一题——LeetCode1266.访问所有点的最小时间

方法一 个人方法 找规律: 当前的点为current,下一个点为next,x为两点横坐标之间距离,y为两点竖坐标之间距离 1、当两点横坐标相同时,两点距离为y 2、当两点竖坐标相同时,两点距离为x 3、当两点x与y相同…

30分钟带你深入优化安卓Bitmap大图

30分钟带你源码深入了解Bitmap以及优化安卓大图 一、前言二、Bitmap入门1. 如何创建Bitmap?2. Bitmap的堆内存分布在哪里3. 图片文件越大,Bitmap堆内存会越大吗?4. 如何管理Bitmap的内存?5. 实战修改Bitmap的堆内存,改变图片的图…

MySQL中锁的概述

按照锁的粒度来分可分为:全局锁(锁住当前数据库的所有数据表),表级锁(锁住对应的数据表),行级锁(每次锁住对应的行数据) 加全局锁:flush tables with read lo…

4 python快速上手

计算机常识知识 1.Python代码运行方式2.进制2.1 进制转换 3. 计算机中的单位4.编码4.1 ascii编码4.2 gb-2312编码4.3 unicode4.4 utf-8编码4.5 Python相关的编码 总结 各位小伙伴想要博客相关资料的话关注公众号:chuanyeTry即可领取相关资料! 1.Python代…

FlinkAPI开发之状态管理

案例用到的测试数据请参考文章: Flink自定义Source模拟数据流 原文链接:https://blog.csdn.net/m0_52606060/article/details/135436048 Flink中的状态 概述 有状态的算子 状态的分类 托管状态(Managed State)和原始状态&…

RDMA Scatter Gather List详解

1. 前言 在使用RDMA操作之前,我们需要了解一些RDMA API中的一些需要的值。其中在ibv_send_wr我们需要一个sg_list的数组,sg_list是用来存放ibv_sge元素,那么什么是SGL以及什么是sge呢?对于一个使用RDMA进行开发的程序员来说&#…

微信小程序(六)tabBar的使用

注释很详细,直接上代码 上一篇 新增内容: 1. 标签栏文字的内容以及默认与选中颜色 2. 标签栏图标的默认样式与选中样式 3. 标签选项路径页面 4.标签栏背景颜色 🐼(文末补充)设置标签栏后为什么navigator标签无法跳转页…

数据集成时表模型同步方法解析

01 背景介绍 数据治理的第一步,也是数据中台的一个基础功能 — 即将来自各类业务数据源的数据,同步集成至中台 ODS 层。业务数据源多种多样,单单可能涉及到的主流关系型数据库就有近十种。功能更加全面的数据中台通常还具有对接非关系型数据…

elasticsearch[一]-索引库操作(轻松创建)、文档增删改查、批量写入(效率倍增)

elasticsearch[一]-索引库操作(轻松创建)、文档增删改查、批量写入(效率倍增) 1、初始化 RestClient 在 elasticsearch 提供的 API 中,与 elasticsearch 一切交互都封装在一个名为 RestHighLevelClient 的类中,必须先完成这个对象的初始化,…

Docker中创建并配置MySQL、nginx、redis等容器

Docker中安装并配置MySQL、nginx、redis等 文章目录 Docker中安装并配置MySQL、nginx、redis等一、创建nginx容器①:拉取镜像②:运行nginx镜像③:从nginx容器中映射nginx配置文件到本地④:重启nginx并重新配置nginx的挂载 二、创建…

苹果Find My可查找添加32件物品,伦茨科技ST17H6x芯片加速产品赋能

苹果最近更新的支持文档证实,从 iOS 16 开始,"Find My"可查找添加物品从16件增加到32件,AirTag 和“查找”网络中的物品利用“查找”网络的强大功能来发挥作用,这个网络由数亿台加密的匿名 Apple 设备构成。“查找”网络…