常用样式

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<template>
  <div>
    <!-- 最多显示一行 -->
    <div class="ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
    <br />
    <!-- 最多显示两行 -->
    <div class="ellipsis-2">
      这是一段最多显示两行的文字，多余的内容会被省略，这是一段最多显示两行的文字，多余的内容会被省略
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="stylus" scoped>
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪元素的 transform 实现。

[class*="hairline"]::after {
  position: absolute;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid #f00;
  transform: scale(0.5);
}

.hairline-top::after {
  border-top-width: 1px;
}

.hairline-bottom::after {
  border-bottom-width: 1px;
}

.hairline-left::after {
  border-left-width: 1px;
}

.hairline-right::after {
  border-right-width: 1px;
}

.hairline-top-bottom::after {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.hairline-surround::after {
  border-width: 1px;
}

<template>
  <div class="hairline_wrap">
    <!-- 上边框 -->
    <div class="hairline-top"></div>

    <!-- 下边框 -->
    <div class="hairline-bottom"></div>

    <!-- 左边框 -->
    <div class="hairline-left"></div>

    <!-- 右边框 -->
    <div class="hairline-right"></div>

    <!-- 上下边框 -->
    <div class="hairline-top-bottom"></div>

    <!-- 全边框 -->
    <div class="hairline-surround"></div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="stylus" scoped>
.hairline_wrap
  padding 15px
  > div
    position relative
    height 30px
    background-color #fff
    margin-bottom 15px

[class*='hairline']::after {
  position: absolute;
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid #f00;
  transform: scale(0.5);
}

.hairline-top::after {
  border-top-width: 1px;
}

.hairline-bottom::after {
  border-bottom-width: 1px;
}

.hairline-left::after {
  border-left-width: 1px;
}

.hairline-right::after {
  border-right-width: 1px;
}

.hairline-top-bottom::after {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.hairline-surround::after {
  border-width: 1px;
}
</style>

以上参考于 Vant 官网的Style 内置样式 (opens new window)

预编译器

node-sass

安装nvm