vant/docs/markdown/en-US/vant-css.md

Built-in Style

Vant contains some common styles that can be used directly by the className.

Text ellipsis

When the text content length exceeds the maximum container width, the excess text is automatically omitted.

<div class="van-ellipsis">
  This is a paragraph of 250px width limit, the back will be omitted.
</div>

Hairline

Add 1px border under the Retina screen for the element, based on a pseudo element.

<!-- border top -->
<div class="van-hairline--top"></div>

<!-- border bottom -->
<div class="van-hairline--bottom"></div>

<!-- border left -->
<div class="van-hairline--left"></div>

<!-- border right -->
<div class="van-hairline--right"></div>

<!-- border top & bottom -->
<div class="van-hairline--top-bottom"></div>

<!-- full border -->
<div class="van-hairline--surround"></div>

Animation

<!-- fade in  -->
<transition name="van-fade">
  <div v-show="visible">Fade</div>
</transition>

<!-- slide bottom -->
<transition name="van-slide-bottom">
  <div v-show="visible">Fade</div>
</transition>