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

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

news 来源：原创 2024/10/1 1:52:29

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>