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

news2024/12/25 14:39:34

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>

结果如下：

在这里插入图片描述

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

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

相关文章

SpringAOP实现的两种方式-JDK动态代理和CGLIB动态代理

SpringAOP实现的两种方式-JDK动态代理和CGLIB动态代理

前言 想要了解SpringAOP的实现方式&#xff0c;需要先了解什么是AOP OOP和AOP的区别 OOP 面向对象&#xff0c;允许开发者定义纵向的关系&#xff0c;但并适用于定义横向的关系&#xff0c;导致了大量代码的重复&#xff0c;而不利于各个模块的重用。 AOP&#xff0c;一般称为…
阅读更多...
让小脚本成为自己高效测试的工具

让小脚本成为自己高效测试的工具

测试中会遇到的工具 软件测试如果仅仅靠手工去执行会发现在很多地方力不从心&#xff0c;虽然市面上已经有大牛开源了一些测试工具可以供我们使用但是在一些公司特有的业务方面则需要我们借助开源或重新做一个自己的测试工具。 测试常用的开源工具 死链接检测工具 Xenu home…
阅读更多...
如何使用便签高效管理自己的工作和时间？

如何使用便签高效管理自己的工作和时间？

在快节奏的现代生活中&#xff0c;我们每天都要面对众多工作任务&#xff0c;而时间却是有限的。如何在有限的时间内高效地完成工作&#xff0c;成为了每个职场人士必须面对的挑战。为了更好地管理时间&#xff0c;提高工作效率&#xff0c;我们往往需要借助一些工具来帮助我们…
阅读更多...
Linux上Java项目环境安装

Linux上Java项目环境安装

java环境 一.免费的管理Linux软件 家庭/学校免费 - NetSarang Website (xshell.com) 二.安装jdk // 检查以前是否安装过jdk java -version // 我们还可以通过以下指令来看我们安装了多少openJDK apt list --installed | grep openjdk// 如果你想卸载某个apt安装的java版本&am…
阅读更多...
CMOS Sensor调试笔记

CMOS Sensor调试笔记

最近在调CMOS Sensor&#xff1b;基于无ISP的芯片。 第一步&#xff0c;找模组厂要到对应Sensor对应分辨率&#xff0c;YUV信息的驱动。 第二步&#xff0c;确认信号的极性&#xff0c;VSYNC&#xff0c;SYNC, PCLK。 第三步&#xff0c;开始测试。 问题解决&#xff1a; 1&am…
阅读更多...
覆盖生活中各方面的5款软件，非常好用

覆盖生活中各方面的5款软件，非常好用

​ 在现代生活中&#xff0c;各类工具软件为我们提供了便捷的解决方案&#xff0c;从日程管理到系统优化&#xff0c;再到文件传输与多媒体编辑&#xff0c;各类软件的功能多样&#xff0c;极大地提升了我们的工作与生活效率。 1.日历清单——日历清单 ​ 日历清单是一款集日…
阅读更多...
运营计划管理——电商运营（案例分享）

运营计划管理——电商运营（案例分享）

运营计划&#xff0c;作为运营管理的重要组成部分&#xff0c;通过科学规划与有效执行&#xff0c;对确保企业目标实现起着至关重要的作用。 运营计划是指通过制定、执行、监控和调整运营计划&#xff0c;以确保企业资源得到合理配置&#xff0c;业务活动有序进行&#xff0c;最…
阅读更多...
[Linux]进程管理指令

[Linux]进程管理指令

进程管理
阅读更多...
学习threejs，添加户外光照光源

学习threejs，添加户外光照光源

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言二、&#x1f340;绘制任意字体模型…
阅读更多...
windows 桌面采集音频

windows 桌面采集音频

头文件&#xff1a; #ifndef __CAPTURE_AUDIO__ #define __CAPTURE_AUDIO__#include <functional> #include <windows.h> #pragma comment(lib, "winmm.lib")class CaptureAudio { public:CaptureAudio();~CaptureAudio();public:bool Init(const std::…
阅读更多...
云计算Openstack Glance

云计算Openstack Glance

OpenStack Glance&#xff08;或称为Glance&#xff0c;但通常OpenStack官方文档中使用的是“Glance”作为项目代号&#xff09;是OpenStack的镜像服务组件&#xff0c;为创建虚拟机提供镜像服务。以下是对OpenStack Glance的详细解析&#xff1a; 一、基本功能 Glance主要提…
阅读更多...
【HTML并不简单】笔记2-你不知道的a元素属性：target、download、ping、referrerpolicy和href

【HTML并不简单】笔记2-你不知道的a元素属性：target、download、ping、referrerpolicy和href

文章目录 target属性download属性ping属性referrerpolicyhref细节自动绝对地址锚点定位无障碍访问为何base元素无人问津实现链接元素a的嵌套 《HTML并不简单&#xff1a;Web前端开发精进秘籍》张鑫旭 笔记 target属性 有场景如下&#xff1a; 在线写作工具经常会有预览功能&a…
阅读更多...
源2.0-M32大模型适配AutoGPTQ工具及量化推理教程

源2.0-M32大模型适配AutoGPTQ工具及量化推理教程

AutoGTPQ简介 AutoGPTQ‌是一个开源工具包&#xff0c;专注于简化大规模语言模型(LLMs)的量化过程。它基于高效的GPTQ算法开发&#xff0c;主要使用Python编程语言&#xff0c;并依托PyTorch框架来实现量化功能。AutoGPTQ的设计目标是为开发者和研究人员提供一个易于使用的API接…
阅读更多...
【Golang】关于Go语言数学计算、随机数生成模块--math

【Golang】关于Go语言数学计算、随机数生成模块--math

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
多功能声学气膜馆：承载梦想与希望的舞台—轻空间

多功能声学气膜馆：承载梦想与希望的舞台—轻空间

在9月29日上午&#xff0c;苏州大学应用技术学院的2024级新生开学典礼暨开学第一课在轻空间建造的多功能声学气膜馆内盛大举行。这一盛典不仅见证了2849名新生的入学&#xff0c;也展示了气膜馆的独特魅力与优越功能。 卓越的声学表现 声学气膜馆采用高性能材料&#xff0c;确保…
阅读更多...
Linux-基础实操篇-组管理和权限管理（上）

Linux-基础实操篇-组管理和权限管理（上）

Linux 组基本介绍 在 linux 中的每个用户必须属于一个组&#xff0c;不能独立于组外。在 linux 中每个文件 有所有者、所在组、其它组的概念。 用户和组的基本概念&#xff1a; 用户名&#xff1a;用来识别用户的名称&#xff0c;可以是字母、数字组成的字符串&#xff0…
阅读更多...
解决DHCP服务异常导致设备无法获取IP地址的方法

解决DHCP服务异常导致设备无法获取IP地址的方法

DHCP在网络环境中会自动为网络中的设备分配IP地址和其他关键网络参数&#xff0c;可以简化网络配置过程。但是&#xff0c;如果DHCP服务出现异常时&#xff0c;设备可能无法正常获取IP地址&#xff0c;会影响到网络通信。 本文讲述一些办法可以有效解决DHCP服务异常导致设备无法…
阅读更多...
YAML管理接口框架配置的最佳实践！！

YAML管理接口框架配置的最佳实践！！

YAML 文件在接口框架中作为配置管理的语言&#xff0c;以其简洁、直观的语法&#xff0c;迅速成为开发者的宠儿。然而&#xff0c;如何高效地管理和组织接口框架的配置&#xff0c;往往是一个容易被忽视的难题。你是否曾因为冗长的配置文件而感到头疼&#xff1f;今天&#xff…
阅读更多...
干冰清洗机的工作原理

干冰清洗机的工作原理

干冰清洗机的工作原理主要基于干冰的物理特性&#xff0c;特别是其升华过程。以下是干冰清洗机工作原理的详细解释&#xff1a; 一、干冰的制备 制冰系统&#xff1a;干冰清洗机内部配备有制冰系统&#xff0c;该系统将液态二氧化碳&#xff08;CO₂&#xff09;快速冷却并压…
阅读更多...
HTTP协议讲解，请求报文与响应报文都是什么？网络控制台查看HTTP请求

HTTP协议讲解，请求报文与响应报文都是什么？网络控制台查看HTTP请求

目录 一. HTTP解析 二. 请求报文 2.1 请求行 2.1.1 请求类型 2.1.2 请求URL路径 2.1.3 发送的HTTP请求的版本 2.2 请求头 2.2.1 Host&#xff1a;主要用来实现虚拟主机技术 2.2.2 Cookie&#xff1a;一种让浏览器帮忙携带信息的手段 2.2.3 Content—type&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023