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'>
.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>
显示结果：
