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 © 版权所有</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'>css">
.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'>css">
.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'>css">
.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>javascript">
</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 © 版权所有</p></div>
</template><style scoped lang='scss'>css">
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>