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

news2024/11/26 13:09:27

想要做的效果:

文本只一行显示

/**
	实现思路:
	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.coloradmin.cn/o/1395112.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Qt开发】初识Qt

文章目录 1. Qt的背景1.1 Qt是什么1.2 Qt的发展史1.3 Qt支持的平台 2. Qt开发环境的搭建2.1 Qt SDK下载2.2 Qt SDK的安装 3. 一个简单的Qt模板程序的创建4. Qt模板程序的代码讲解4.1 main.cpp4.2 widget.h4.3 widget.cpp4.4 widget.ui4.5 test_1_18.pro4.6 一些中间文件 5. Qt在…

【华为 ICT HCIA eNSP 习题汇总】——题目集3

1、(多选)IEEE 802.11n支持在哪些频率下工作? A、2.5GHz B、2.4GHz C、5GHz D、6GHz 考点:无线局域网 解析:(BC) IEEE 820.11n 支持双频段,它兼容IEEE 802.11a 与IEEE 820.11b 两种标…

苹果笔记本 macbook 在 office word 中使用 mathtype 的方法

前言 想在 MacBook 中使用 mathtype,去搜索,去 Apple Store 下载也发现没有 解决方法 打开 office Word 的「插入」中的「获取加载项」、「我的加载项」。 在应用商店中下载,需要登录自己的微软账号。 加载成功后就可以使用了。 注意 和…

微信小程序vue+uniapp瑜伽馆课程预约选课管理系统

本文对该站点以及对其进行了全面的剖析,为瑜伽馆管理系统的发展带来了借鉴。瑜伽馆管理系统小程序对于瑜伽馆起到了很好的引导作用,特别是对于地方瑜伽馆的处理起到了很大的作用。 按照已有的功能,除了管理员外,还可以对系统中的全…

k8s的坑,从这里开始

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 以前刚接触k8s时踩了不少坑,比如这些: 问题1 1、在master节点使用kubectl命令时,报错&…

Linux快速部署文件服务器

参考文档: Linux命令之nohup详解 - 掘金 【Linux】ps -ef|grep详解-CSDN博客 有个简单想法,我的一些文件放在机器某个目录下面,可以简单提供团队内部人员浏览和下载功能,节约时间,用最简单方法实现。 注:…

3Dmax灯光学习(Vray灯光应用)

渲染效果图可以用渲染100哦,最高支持max2024,cr11,vr6.2,支持LUT和Acescg工作流等常用插件,同时森林插件7.43也进行了支持,注册填邀请码【7788】即可免费测试! 灯光应用 普通灯光/标准灯光(外景…

PostgreSQL 中的 JSON:彻底改变数据库中的数据灵活性

在这篇文章中,我们将介绍 PostgreSQL 对 JSON 对象的实现和处理方法。拥有一些 Linux、Postgres 和 JSON 方面的经验是必要的,因为我们不仅要介绍这些新功能,还要介绍如何实现它们。 本文使用在 Ubuntu 23.04 上运行的 PostgreSQL 16&#x…

springcloud Ribbon负载均衡服务调用

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

eNSP学习——部分VLAN间互通、部分VLAN间隔离、VLAN内用户隔离(MUX-VLAN)

MUX VLAN(Multiplex VLAN)提供了一种通过VLAN进行网络资源控制 的机制。通过MUX VLAN提供的二层流量隔离的机制可以实现企业内部员 工之间互相通信,而企业外来访客之间的互访是隔离的。 特点: 一、主VLAN端口可以和所有VLAN通信 二…

云原生演进中的AI算力高效使用

0 1 云原生技术的普及与发展 云原生技术是一种基于容器技术的轻量级、高可用的应用架构,具有弹性扩展、快速部署、统一管理等特点。随着企业对敏捷开发和快速迭代的需求不断增加,云原生技术的普及与发展已成为不可逆转的趋势。 图1. 云原生技术发展之路…

给Windows电脑设置一个还原点,电脑出错可快速恢复使用

前言 离不开电脑的小伙伴们经常会有这种烦恼:Windows系统不知道什么时候会崩溃。 电脑一旦重装系统,就不是一件简单的事情。 其实重装系统并不麻烦,但麻烦的是需要把自己经常使用的电脑软件一并装上,这就是一件非常大的工程。电…

adb 配对+无线连接

配对 打开手机开发者选项-无线调试-使用配对码配对设备 出现ip端口和配对码后,电脑输入命令: adb pair ip:端口 eg:adb pair 192.168.137.244:39683 提示输入配对码:就按照手机上的输入。 此时配对成功 连接 再使用命令adb connect ip:port…

Nginx深度解析

Nginx是一个开源的高性能Web服务器,广泛用于提供HTTP服务。 它以其高效能、稳定性和低资源消耗而闻名。 Nginx的核心特性 异步非阻塞事件驱动架构:Nginx的主要优势之一是它的异步非阻塞处理方式,这使得它在处理大量并发连接时非常高效。轻量…

flutter 环境搭建异常记录

flutter 环境搭建异常记录 1.执行flutter doctor自检报错 排查Android studio里配置的sdk是哪个 SDK Platforms选中 8.0 SDkTools也只勾选8.0 2.bash_profile 文件配置 没有的话 在根目录新建 export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_…

用于自动驾驶最优间距选择和速度规划的多配置二次规划(MPQP) 论文阅读

论文链接:https://arxiv.org/pdf/2401.06305.pdf 论文题目:用于自动驾驶最优间距选择和速度规划的多配置二次规划(MPQP) 1 摘要 本文介绍了用于自动驾驶最优间距选择和速度规划的多配置二次规划(MPQP)。…

Spring MVC——Spring MVC(3)

1.拦截器 1.1.什么是拦截器? ​ Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理。例如通过拦截器可以进行权限验证、判断用户是否登录等。 ​…

[二]rtmp服务器搭建

[二]rtmp服务器搭建 一.测试二.使用Nginx搭建自己的rtmp服务器1.nginx是什么?2.环境准备 三、搭建过程1.安装编译 nginx 所需要的库2.下载 nginx-1.21.6.tar.gz3.下载 nginx-rtmp-module 4.解压5.编译6.启动nginx,检测nginx是否能成功运行7.配置nginx使用…

k8s---ingress对外服务(traefik)

目录 ingress的证书访问 traefik traefik的部署方式: deamonset deployment nginx-ingress与traefix-ingress相比较 nginx-ingress-controller ui访问 deployment部署 ingress的证书访问 ingress实现https代理访问: 需要证书和密钥 创建证书 密钥 secre…

漏洞扫描的原理是什么,分为几个阶段进行

网络漏洞扫描主要通过扫描已知的网络缺陷、不正确的网络设置和过时的网络应用版本来检测漏洞。漏洞扫描主要分为哪三个阶段?对于企业来说,创建持续监控容器并查找安全漏洞的服务。 漏洞扫描的原理 一、信息收集 漏洞扫描器首先会收集目标系统的相关信息…