css-空格，多行末尾省略号显示，鼠标移动上文本显示提示全文本

哟哟耶耶

已于 2024-02-18 10:48:02 修改

阅读量224

点赞数

分类专栏： css 文章标签： html 前端 less css

于 2023-10-10 19:01:21 首次发布

本文链接：https://blog.csdn.net/2301_76671906/article/details/133753722

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.三种空白字符

        &nbsp; 半角不断行

        &ensp   1/2

        &emsp   1

2.前端中需要空格

搜狗中: shift+ctrl+z

3.div内容超出出现滚动条

(1)内容在一个div中

(2)div拥有高度和宽度

(3)overflow:auto; overflow-x; overflow-y;

(4)white-space:nowarp强制文字在同一行

4.鼠标移动上显示禁止

        curor:not-allowed;

5.单行div内文字溢出部分省略号表示

方法1

 .div{

        text-overflow:ellipsis; （显示省略号）

        white-space:nowrap; (强制文字同一行不换行)

        overflow:hidden;            (超出部分隐藏)

}

方法2

<style>
  .div1{
    background-color: aqua;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    word-break: break-all;  /* 内容自动换行 */
    max-width: 70%; 
    height: 20px; 
    line-height: 20px; 
    float:left;  
    font-size: 14px; 
    color: #5f625c; 
  }
</style>

<body>
    <div class="div1">
      哟哟哟哟哟哟哟哟哟哟哟哟哟哟噢哟哟哟哦也切开取二块钱，重庆理工大学，重庆理工大学哟哟哟哟哟噢哟yoo哟哟哦也哟哟哦
    </div>
</body>

</html>

6.多行末尾省略号显示

 .div{

       display:-webkit-box;（弹性伸缩盒子）

       -webkit-box-orient:vertical;   (设置子排列方式)

        -webkit-line-clamp:3; （块元素显示的行数）

       overflow:hidden;            (超出部分隐藏)

}

7. 鼠标移动上文本显示提示全文本

<div class="texts">
  <div class="textName">名称:&nbsp;&nbsp;</div>
    <a-tooltip placement="top">
        <template slot="title">
          {{ project.pojInfo.name }}
        </template>
     <div class="textContent">
          {{ project.pojInfo.name }}
     </div>
    </a-tooltip>
</div>

8.span中的左右对齐

float:right /left

9. ：：before与：：after伪类元素在前后追加icon或者标记

结合content:" ";使用

10.清除组件库中指定组件的样式

 父类添加类名  /deep/ 子类{

                ！important

}

11.弹框中表单高度校验提示后距离不变

// 表单高度 校验提示后距离不变
/deep/.ant-form-item {
    height: 60px!important;
    margin-bottom: 0px!important;
    padding-bottom: 0px !important;
}