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

css 中 ~ 符号、text-indent、ellipsis、ellipsis-2、text-overflow: ellipsis、::before的使用

1、~的使用直接看代码

<script setup>
</script><template><div class="container"><p><a href="javascript:;">纪检委</a><a href="javascript:;">中介为</a><a href="javascript:;">中纪委</a><a href="javascript:;">中纪委</a><a href="javascript:;">中纪委</a><a href="javascript:;">中纪委</a></p><p>CopyRight &copy; 版权所有</p></div>
</template><style scoped lang='scss'>
p {text-align: center;color: #999;padding-top: 20px;a {line-height: 1;padding: 0 10px;color: #999;display: inline-block;~a {border-left: 1px solid #ccc;}}
}
</style>

显示结果如下:

在这里插入图片描述

a~a中~a的作用就是选中a中除第一个a外的所有的a

2、text-indent的使用:


<template><a class="aTest0">测试0</a>
<a class="aTest1">测试1</a>
<div class="aTest2">测试2</div>
<div class="aTest3">测试3</div></template><style scoped lang='scss'>
.aTest0{//display: block;height: 50px;background-color: deeppink;width: 100px;text-indent: -9999px;  // 必须是块元素或者行内块元素  行内元素此属性text-indent无效
}
.aTest1{display: block;height: 50px;background-color: deeppink;width: 100px;text-indent: -9999px;
}
.aTest2{text-indent: -100px;
}</style>

效果如下:

在这里插入图片描述

3、ellipsis、ellipsis-2的使用


<template><div class="outer"><image class="left"></image><div class="aTest2"><div class="box ellipsis" >显示名字</div><div class="aTest3 ellipsis-2">这是一个对文字进行详细描述的非常长的一个长句子</div><div class="aTest3">显示金额</div><p class="box ellipsis" >显示您的详细名字</p><p class="aTest3 ellipsis-2">这是一个对文字进行详细描述的非常长的一个长句子</p><p class="aTest3">显示金额</p></div>
</div></template><style scoped lang='scss'>
.outer{width: 500px;height: 500px;background-color: pink;display: flex;align-items: center;.left{width: 400px;height: 400px;background-color: #fff;border: 1px solid gray;}.aTest2{padding-left: 10px;//overflow: hidden;}
}
</style>

显示结果:

在这里插入图片描述

把 //overflow: hidden;改成 overflow: hidden;显示如下:

在这里插入图片描述

4、text-overflow: ellipsis;的使用

单行设置:要设置四个参数

height: 20px;
white-space: nowrap; // 单行的 只需要添加个它即可
overflow: hidden;
text-overflow: ellipsis;

两行设置:要设置六个参数

height: 40px;
overflow: hidden;				//溢出内容隐藏
text-overflow: ellipsis;		//文本溢出部分用省略号表示
display: -webkit-box;			//特别显示模式
-webkit-line-clamp: 2;			//行数
-webkit-box-orient: vertical;	//盒子中内容竖直排列

整体案例:


<template><div class="outer"><image class="left"></image><div class="aTest2"><div class="wrap1"><div class="box" >显示名字</div><div class="aTest3">这是一个对文字进行详细描述的非常长的一个长句子</div><div class="aTest4">显示金额</div></div><div class="wrap2"><p class="box" >显示您的详细名字</p><p class="aTest3 ">这是一个对文字进行详细描述的非常长的一个长句子</p><p class="aTest4">显示金额</p></div></div>
</div></template><style scoped lang='scss'>
.outer{width: 500px;height: 500px;background-color: pink;display: flex;align-items: center;.left{width: 400px;height: 400px;background-color: #fff;border: 1px solid gray;}.aTest2{padding-left: 10px;overflow: hidden;.wrap1{margin-top: 10px;.aTest3{height: 40px;overflow: hidden;				//溢出内容隐藏text-overflow: ellipsis;		//文本溢出部分用省略号表示display: -webkit-box;			//特别显示模式-webkit-line-clamp: 2;			//行数-webkit-box-orient: vertical;	//盒子中内容竖直排列}}.wrap2{margin-top: 10px;.box{height: 20px;white-space: nowrap; // 单行的 只需要添加个它即可overflow: hidden;text-overflow: ellipsis;}.aTest3{height: 40px;overflow: hidden;				//溢出内容隐藏text-overflow: ellipsis;		//文本溢出部分用省略号表示display: -webkit-box;			//特别显示模式-webkit-line-clamp: 2;			//行数-webkit-box-orient: vertical;	//盒子中内容竖直排列}}}
}
</style>

显示结果:

在这里插入图片描述

5、::before 就是在当前元素前边相当于添加一个新的标签

<script setup>
</script><template><div className="container"><p><a href="javascript:;">纪检委</a><a href="javascript:;">中介为</a><a href="javascript:;">中纪委</a><a href="javascript:;">中纪委</a><a href="javascript:;">中纪委</a><a href="javascript:;">中纪委</a></p><p>CopyRight &copy; 版权所有</p></div>
</template><style scoped lang='scss'>
p {text-align: center;color: #999;padding-top: 20px;a {line-height: 1;padding: 0 10px;//text-align: center;line-height: 100px;color: #999;display: inline-block;height: 100px;position: relative;~ a::before {  // 在非第一个a标签之后的所有a标签前添加一个伪类元素,内容就是一个可以控制长短的竖线,position: absolute;top: calc((100px - 15px)/2); // 用于控制竖线的高低  100为父元素高度,15为自身高度left: 0;height: 15px;  // 用于控制竖线的长短//height: 100%;border-left: 1px solid black;content: "";}}
}
</style>

结果如下:

在这里插入图片描述

相关文章:

css 中 ~ 符号、text-indent、ellipsis、ellipsis-2、text-overflow: ellipsis、::before的使用

1、~的使用直接看代码 <script setup> </script><template><div class"container"><p><a href"javascript:;">纪检委</a><a href"javascript:;">中介为</a><a href"javascript:…...

Activiti 工作流大致了解

一、什么是 Activiti 简而言之&#xff0c;就是系统的流程图&#xff0c;如&#xff1a;请假审批流程、账单审批流程等。 二、mysql与pom配置 mysql要使用jdbc:mysql://localhost:3306/activiti?autoReconnecttrue pom文件要添加关键依赖 <!--activiti核心依赖--> &…...

速盾:高防 CDN,网站安全的有力保障

在当今数字化时代&#xff0c;网站安全已成为企业和个人关注的焦点。随着网络攻击手段的不断升级&#xff0c;传统的安全防护措施已经难以满足需求。而高防 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;的出现&#xff0c;为网站安全提供了有…...

宝塔搭建nextcould 30docker搭建onlyoffic8.0

宝塔搭建nextcould 宝塔搭建nextcould可以参考这两个博文 我搭建的是30版本的nextcould&#xff0c;服务组件用的是下面这些&#xff0c;步骤是一样的&#xff0c;只是版本不一样而已 nginx 1.24.0 建议选择nginx&#xff0c;apache没成功。 MySQL 8.0以上都可以 php 8.2.…...

【源码+文档+调试讲解】交通信息管理系统

摘 要 智能交通信息管理系统是一种基于计算机技术的软件系统&#xff0c;旨在提高交通管理的效率和服务质量。通过该系统可以实现智能交通管理的全面管理和优化。智能交通信息管理系统具备集成管理功能。它能够整合智能交通管理的各个业务环节&#xff0c;包括个人中心、用户管…...

小阿轩yx-案例:Ansible剧本文件实践

小阿轩yx-案例&#xff1a;Ansible剧本文件实践 Playbook 介绍 什么是 playbook playbook 顾名思义&#xff0c;即剧本&#xff0c;现实生活中演员按照剧本表演在 ansible 中&#xff0c;由被控计算机表演&#xff0c;进行安装&#xff0c;部署应用&#xff0c;提供对外的服…...

【ShuQiHere】深入理解微架构(Microarchitecture):LC-3 的底层实现 ️

【ShuQiHere】&#x1f5a5;️ 微架构&#xff08;Microarchitecture&#xff09; 是计算机体系结构中的重要概念&#xff0c;它定义了如何将 指令集架构&#xff08;Instruction Set Architecture, ISA&#xff09; 转化为实际硬件。通过微架构&#xff0c;我们可以理解计算机…...

Ubuntu24.04.1系统下VideoMamba环境配置

文章目录 前言第一步&#xff1a;基本的环境创建第二步&#xff1a;causal-conv1d和mamba_ssm库的安装第三步&#xff1a;安装requirements.txt 前言 VideoMamba环境的配置折磨了我三天&#xff0c;由于Mamba对Cuda的版本有要求&#xff0c;因此配置环境的时候Cuda版本以及各种…...

c++第十二章续(队列结构类模拟)

队列类 设计类&#xff0c;需要开发公有接口和私有实现 Queue类接口 公有接口&#xff1a; 默认初始化&#xff0c;和可以用显式初始化覆盖默认值 Queue类的实现 如何表示队列数据&#xff1a; 一种方法是使用new动态分配一个数组&#xff0c;它包含所需的元素数。不过&…...

数据集-目标检测系列-豹子 猎豹 检测数据集 leopard>> DataBall

数据集-目标检测系列-豹子 猎豹 检测数据集 leopard>> DataBall 数据集-目标检测系列-豹子 猎豹 检测数据集 leopard 数据量&#xff1a;5k 想要进一步了解&#xff0c;请联系。 DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#x…...

基于ESP8266—AT指令连接阿里云+MQTT透传数据(3)

MQTT_RX设备为接收(订阅)数据的Topic,使用ESP8266通过AT指令实现。 首先需要串口通信软件,如 SSCOM、PuTTY、SecureCRT 等串口调试工具,功能丰富,支持常见的串口调试功能,用于发送AT指令。 以下是ESP8266通过AT指令连接阿里云MQTT服务的步骤: 1、初始化WiFi 发送下面…...

redis的数据结构,内存处理,缓存问题

redisObject redis任意数据的key和value都会被封装为一个RedisObject&#xff0c;也叫redis对象&#xff1a; 这就redis的头信息&#xff0c;占有16个字节 redis中有两个热门数据结构 1.SkipList&#xff0c;跳表&#xff0c;首先是链表&#xff0c;和普通链表有以下差异&am…...

机器学习模型评估与选择

前言 承接上篇讲述了机器学习有哪些常见的模型算法&#xff0c;以及使用的场景&#xff0c;本篇将继续讲述如何选择模型和评估模型。几个概念了解一下&#xff1a; 经验误差&#xff1a;模型在训练集上的误差称之为经验误差&#xff1b;过拟合&#xff1a;模型在训练集上表现…...

Web认识 -- 第一课

文章目录 前言一、HTML是什么&#xff1f;二、了解Web1. 基本概念2.Web标准3. Web构成1.前端1. HTML2.CSS3. javaScript4.常见浏览器介绍 2.Web标签构成1.结构标准2.表现标准 -- css3. 行为标准 -- javaScript 总结 前言 这里是我们进入前端学习的开端,在本次更新之后我会陆续…...

Recaptcha2 图像识别 API 对接说明

Recaptcha2 图像识别 API 对接说明 本文将介绍一种 Recaptcha2 图像识别2 API 对接说明&#xff0c;它可以通过用户输入识别的内容和 Recaptcha2验证码图像&#xff0c;最后返回需要点击的小图像的坐标&#xff0c;完成验证。 接下来介绍下 Recaptcha2 图像识别 API 的对接说…...

6种MySQL高可用方案对比分析

大家好&#xff0c;我是 V 哥&#xff0c;关于 MySQL 高可用方案&#xff0c;在面试中频频出现&#xff0c;有同学在字节面试就遇到过&#xff0c;主要考察你在高可用项目中是如何应用的&#xff0c;V 哥整理了6种方案&#xff0c;供你参考。 MySQL的高可用方案有多种&#xf…...

FastAPI: websocket的用法及举例

1. Websocket 1.1 Websocket介绍 WebSocket 是一种在单个TCP连接上进行全双工通信的协议&#xff0c;允许客户端和服务器之间相互发送数据&#xff0c;而不需要像传统的HTTP请求-响应模型那样频繁建立和断开连接。 全双工通信(Full-Duplex Communication)是一种通信模式&#…...

JavaSE——面向对象2:方法的调用机制、传参机制、方法递归、方法重载、可变参数、作用域

目录 一、成员方法 (一)方法的快速入门 (二)方法的调用机制(重要) (三)方法的定义 (四)注意事项和使用细节 1.访问修饰符(作用是控制方法的使用范围) 2.返回的数据类型 3.方法名 4.形参列表 5.方法体 6.方法调用细节说明 (五)传参机制 1.基本数据类型的传参机制 …...

Vue+Flask

App.vue 首先要安装 npm install axios<template><div><h1>{{ message }}</h1><input v-model"name" placeholder"Enter your name" /><input v-model"age" placeholder"Enter your age" /><…...

深入剖析 Android Lifecycle:构建高效稳定的应用

在 Android 开发中&#xff0c;管理应用组件的生命周期是至关重要的。正确处理生命周期事件可以确保应用的性能、稳定性和用户体验。Android Framework 提供了一系列的机制来管理应用组件的生命周期&#xff0c;而android.arch.lifecycle库则为我们提供了更简洁、更灵活的方式来…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...