demo.vue 918 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div class="demo-style">
  3. <demo-block title="文字省略">
  4. <div class="van-ellipsis">这是一段最多显示一行的文字,后面的内容会省略</div>
  5. <div class="van-multi-ellipsis--l2">这是一段最多显示两行的文字,后面的内容会省略。这是一段最多显示两行的文字,后面的内容会省略</div>
  6. </demo-block>
  7. <demo-block title="1px 边框">
  8. <div class="van-hairline--top" />
  9. </demo-block>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. }
  15. </script>
  16. <style lang="less">
  17. @import './style/var';
  18. .demo-style {
  19. .van-ellipsis,
  20. .van-multi-ellipsis--l2 {
  21. max-width: 300px;
  22. margin-left: @padding-md;
  23. font-size: 14px;
  24. line-height: 18px;
  25. }
  26. .van-ellipsis {
  27. margin-bottom: @padding-md;
  28. }
  29. .van-hairline--top {
  30. height: 30px;
  31. background-color: @white;
  32. &::after {
  33. top: 5px;
  34. }
  35. }
  36. }
  37. </style>