# 常用样式

# 文字省略

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

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

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

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

# 预编译器

# node-sass




安装nvm
上次更新: 11/17/2021, 10:37:32 AM