style.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .font36 {
  2. font-size: 36rpx;
  3. }
  4. .font32 {
  5. font-size: 30rpx;
  6. }
  7. .font28 {
  8. font-size: 28rpx;
  9. }
  10. .font24 {
  11. font-size: 24rpx;
  12. }
  13. .flex {
  14. display: flex;
  15. align-items: center;
  16. justify-content: space-between;
  17. }
  18. .flex-start {
  19. display: flex;
  20. align-items: center;
  21. justify-content: flex-start;
  22. }
  23. .flex-end {
  24. display: flex;
  25. align-items: center;
  26. justify-content: flex-end;
  27. }
  28. .flex-center {
  29. display: flex;
  30. align-items: center;
  31. justify-content: center;
  32. }
  33. .flex-around {
  34. display: flex;
  35. align-items: center;
  36. justify-content: space-around;
  37. }
  38. .text-clamp {
  39. display: block;
  40. overflow: hidden;
  41. /* //超出的文本隐藏 */
  42. text-overflow: ellipsis;
  43. /* //溢出用省略号显示 */
  44. white-space: nowrap;
  45. /* //溢出不换行 */
  46. }
  47. .text-clamp2 {
  48. overflow: hidden;
  49. text-overflow: ellipsis;
  50. display: -webkit-box;
  51. /* //作为弹性伸缩盒子模型显示。 */
  52. -webkit-box-orient: vertical;
  53. /* //设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
  54. -webkit-line-clamp: 2;
  55. /* //显示的行 */
  56. }
  57. .text-clamp3 {
  58. overflow: hidden;
  59. text-overflow: ellipsis;
  60. display: -webkit-box;
  61. /* //作为弹性伸缩盒子模型显示。 */
  62. -webkit-box-orient: vertical;
  63. /* //设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
  64. -webkit-line-clamp: 3;
  65. /* //显示的行 */
  66. }