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>

显示结果:

相关推荐
别拿曾经看以后~12 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死15 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试17 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人26 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人27 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR32 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香34 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969337 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai42 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter