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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Debian】非图形界面Debian10.0.0安装xfce和lxde桌面

一、安装 1. Debian10.0.0安装xfce桌面 sudo apt update sudo apt install xfce4 startxfce4 2. Debian10.0.0安装lxde桌面 sudo apt-get install lxde安装后重启电脑。 二、说明 XFCE、LXDE 和 GNOME 是三个流行的桌面环境,它们都是为类 Unix 操作系统设计…

springboot108精品在线试题库系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的精品在线试题库系统 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 第五章 第四章 …

SCI 2区论文:医疗保健中心训练有素的脑膜瘤分割模型的性能测试-基于四个回顾性多中心数据集的二次分析

基本信息 标题:Performance Test of a Well-Trained Model for Meningioma Segmentation in Health Care Centers: Secondary Analysis Based on Four Retrospective Multicenter Data Sets中文标题:医疗保健中心训练有素的脑膜瘤分割模型的性能测试&am…

arthas(阿尔萨斯)日常java代码调优使用命令

官方项目文档:https://gitee.com/arthas/arthas (最权威的教学还是得官网,这里仅作简单记录) 1:启动 java -jar arthas-boot.jar 2:查看cpu占用排名前三 thread -3 3:查看指定id thread 203 4:查…

【音视频原理】图像相关概念 ③ ( RGB 色彩简介 | RGB 排列 | YUV 色彩简介 | YUV 编码好处 )

文章目录 一、RGB 色彩1、RGB 色彩简介2、RGB 排列 二、YUV 色彩1、YUV 色彩简介2、YUV 编码好处 一、RGB 色彩 1、RGB 色彩简介 RGB 是 计算机 中的 颜色编码方法 , 红 ( R ) / 绿 ( G ) / 蓝 ( B ) 三个颜色通道 可以设置不同的值 , 每个 通道 的 颜色值都可以取值 0 ~ 255 ,…

回溯算法篇-01:全排列

力扣46:全排列 排列和组合的区别在于,排列对“顺序”有要求。比如 [1,2] 和 [2,1] 是两个不同的结果。 这就导致了同一个元素 在同一条路径中不可重复使用,在不同的路径中可以重复使用。 比如数组 [1,2,3] ,在第一条路径 [1,2,…

VUE工程化--vue组件注册

组件注册的两种方式: 1. 局部注册:只能在注册的组件内使用 2. 全局注册:所有组件内都能使用 局部注册步骤: 1、导入 import MyHeader from "./components/myHeader.vue"; import MyMain from "./components/myMa…

MFC 序列化机制

目录 文件操作相关类 序列化机制相关类 序列化机制使用 序列化机制执行过程 序列化类对象 文件操作相关类 CFile:文件操作类,封装了关于文件读写等操作,常见的方法: CFile::Open:打开或者创建文件CFile::Write/…

c++学习笔记-STL案例-机房预约系统4-管理员模块

前言 衔接上一篇“c学习笔记-STL案例-机房预约系统3-登录模块”,本文主要设计管理员模块,从管理员登录和注销、添加账号、显示账号、查看机房、清空预约五个功能进行分析和实现。 目录 7 管理员模块 7.1 管理员登录和注销 7.1.1 构造函数 ​编辑7.1.2…

MySQL UPDATE 更新

昨天介绍了 MySQL 数据库 WHERE 子句的用法,今天来讲解下UPDATE 更新。 语法 在 MySQL 使用过程中,我们经常需要修改数据,这时就要用到UPDATE 命令。 老规矩,先介绍一下语法。以下是 UPDATE 命令修改 MySQL 数据表数据的通用 S…

如何使用idm下载百度网盘的资源

IDM是海内外都非常受欢迎的一款下载管理软件。它支持视频媒体嗅探和多线程下载,能够完美替代谷歌Chrome浏览器、Edge浏览器等浏览器的原生下载功能。在浏览器中单击下载链接时,idm将接管浏览器的原生下载工具并加快下载速度,支持HTTP&#xf…

机器人持续学习基准LIBERO系列6——获取并显示实际深度图

0.前置 机器人持续学习基准LIBERO系列1——基本介绍与安装测试机器人持续学习基准LIBERO系列2——路径与基准基本信息机器人持续学习基准LIBERO系列3——相机画面可视化及单步移动更新机器人持续学习基准LIBERO系列4——robosuite最基本demo机器人持续学习基准LIBERO系列5——…