_text.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /* ==================
  2. 文本
  3. ==================== */
  4. @use 'sass:math';
  5. .font-0 {
  6. font-size: 24rpx;
  7. --textSize: -4rpx;
  8. }
  9. .font-1 {
  10. font-size: 28rpx;
  11. --textSize: 0rpx;
  12. }
  13. .font-2 {
  14. font-size: 32rpx;
  15. --textSize: 4rpx;
  16. }
  17. .font-3 {
  18. font-size: 36rpx;
  19. --textSize: 8rpx;
  20. }
  21. .font-4 {
  22. font-size: 40rpx;
  23. --textSize: 12rpx;
  24. }
  25. .text {
  26. @each $class, $value in $fontsize {
  27. &-#{$class},
  28. &-#{math.div($value ,2)} {
  29. font-size: calc(#{$value}rpx + var(--textSize)) !important;
  30. }
  31. }
  32. &-cut {
  33. text-overflow: ellipsis;
  34. white-space: nowrap;
  35. overflow: hidden;
  36. }
  37. @at-root [class*='text-linecut'] {
  38. display: -webkit-box;
  39. -webkit-box-orient: vertical;
  40. -webkit-line-clamp: 2;
  41. overflow: hidden;
  42. word-break: break-all;
  43. }
  44. @for $i from 2 through 10 {
  45. &-linecut-#{$i} {
  46. -webkit-line-clamp: #{$i};
  47. }
  48. }
  49. &-justify {
  50. text-align: justify;
  51. }
  52. &-justify-line {
  53. text-align: justify;
  54. line-height: 0.5em;
  55. margin-top: 0.5em;
  56. &::after {
  57. content: '.';
  58. display: inline-block;
  59. width: 100%;
  60. }
  61. }
  62. &-Abc {
  63. text-transform: Capitalize !important;
  64. }
  65. &-ABC {
  66. text-transform: Uppercase !important;
  67. }
  68. &-abc {
  69. text-transform: Lowercase !important;
  70. }
  71. &-del,
  72. &-line {
  73. text-decoration: line-through !important;
  74. }
  75. &-bottomline {
  76. text-decoration: underline !important;
  77. }
  78. &-italic {
  79. font-style: italic !important;
  80. }
  81. &-style-none {
  82. text-decoration: none !important;
  83. }
  84. &-break {
  85. word-break: break-word !important;
  86. overflow-wrap: break-word !important;
  87. }
  88. &-reset {
  89. color: inherit !important;
  90. }
  91. &-price::before {
  92. content: '¥';
  93. font-size: 80%;
  94. margin-right: 4rpx;
  95. }
  96. &-hide {
  97. font: 0/0 a;
  98. color: transparent;
  99. text-shadow: none;
  100. background-color: transparent;
  101. border: 0;
  102. }
  103. }