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

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的使用：

html 复制代码

<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的使用

html 复制代码

<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;的使用

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

html 复制代码

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;	//盒子中内容竖直排列

整体案例：

html 复制代码

<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>