个人记录

8. css 基础样式

8.1 css 超出部分显示...

<span class='longSpan'></span>

.longSpan {
    display: inline-block;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

8.2 css 允许换行，但是超过指定行数显示...

<div class='contentli-content'>
  <span>...文字</span>
</div>

.contentli-content{
  overflow: hidden; // 超出的部分隐藏
  display: -webkit-box;
  line-clamp: 10;
  -webkit-box-orient: vertical;  // 对齐方式
  -webkit-line-clamp: 10; // 超过多少行显示 ...
  text-indent: 2rem;  // 首行缩进
}

8.3 css禁用 a 标签的点击事件

a{
    color: #fff !important;
    cursor: default;
    **pointer-events:none; // **禁用掉鼠标事件
    text-decoration: none !important;
}

8.4 使用css实现一些比较炫酷的文字样式

如下

实现方式

font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #ffffff;
text-shadow: 0px 2px 3px rgb(10 38 89 / 15%);
background-image: linear-gradient(to bottom, #ffffff, #8bbfff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

8.5 使用less，通过动态绑定style的方式实现自定义变量的传参和属性计算。

8.5.1 定义less变量及使用

<template>
  <div class="exampleDom" :style='{ lessFields:  }'>
</template>

<script>
export default {
  props:{ 
    width:{
      type: String,
      defalut: '80px'
    }
  }
}
</script>

<style lang='less' scoped>
@lessFields: var(--lessFields, '1%');
:export {
  lessFields: @lessFields;
}

.exampleDom{
    width: calc(100% - @lessFields);
}
</style>