1. Display ellipses

(1) Single line text overflow display ellipsis

Implementation method (need to add width genus to enable partial browsing) :

overflow:hidden; Text-overflow :ellipsis; text-overflow:ellipsis; // Overflow with ellipsis to display white-space:nowrap; // Overflow does not break linesCopy the code

(2) Multiple lines of text overflow display ellipsis

Implementation method

display:-webkit-box; // Display objects as elastic stretchable box models. -webkit-box-orient:vertical; // Set the arrangement of child elements vertically from top to bottom -webkit-line-clamp:2; // This property is not a standard CSS property. You need to combine the above two properties to indicate the number of lines to display. overflow:hidden; Text-overflow :ellipsis; text-overflow:ellipsis; // Overflow is shown with ellipsisCopy the code

Application Scope: This method applies to WebKit browsers and mobile devices because WebKit CSS extensions are used

(3) JS to achieve multi-line text ellipsis display

Substring intercepts strings in the specified range and concatenates…

substr (str) { if (str.length > 8) { return str.substring(0, 8) + '... ' } return str }Copy the code

2. Implement horizontal scrolling

HTML basic structure (A tag can be nested again div or other)

< div class = "nav - wrap" > < b > all < / a > < a > Adobe < / a > < a > Microsoft < / a > < / a > < a > accounting painting < a > < / a > < / a > < a > Microsoft painting < a > < / a > < a > computer < / a > < / a > < a > front-end engineer </div>Copy the code

CSS writing (using less)

.nav-wrap { .nav-tab{ margin-top: 15px; padding: 2px 6px; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: scroll; overflow-y: hidden; &::-webkit-scrollbar{background-color:transparent; } a{ font-size: 18px; border: 1px solid #666; padding: 5px 8px; margin-right: 5px; border-radius: 12px; line-height: 18px; white-space: nowrap; } // display: none; // display: none; // /* background-color:transparent; * / / /}Copy the code

3. Text Tumble effect (VUE)

<template> <div class="scroll-wrap"> <ul class="scroll-list" :class="{'animate-up': animateUp}"> <li v-for="(item, ScrollListData ":key="index"> {{item}} </li> </ul> </div> </template> <script> Name: 'scrollDemo', components: {}, data () {return {// scrollListData: ['12*** *ve successfully invited 12 people have won the bonus 60 yuan ', 'L ***e successfully invited 5 people have won the bonus 40 yuan ',' L ***e successfully invited 1 people have won the bonus 5 yuan '], // Whether to add rolling animation effect animateUp: False, // timer timer: NULL}}, computed: {}, watch: {}, methods: {// Start the roll animation, ScrollAnimate () {this.animateUp = true // 0.5 seconds Execute the delay timer callback setTimeout(() => {// Append an element with an index value of 0 to the array Enclosing scrollListData. Push (enclosing scrollListData [0]) / / remove the first item in the array. This scrollListData. The shift () enclosing animateUp = false}, }}, mounted () {// Start the timer. Time.timer = setInterval(time.scrollanimate, 1500)}, Destroyed () {// Destroy timer clearInterval(this.timer)}} </script> <style lang='less' scoped>. Scroll-wrap {width: 80%; height: 40px; border-radius: 20px; background: skyblue; margin: 0 auto; overflow: hidden; .scroll-list { margin: 0; padding: 0; li { height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 20px; list-style: none; line-height: 40px; text-align: center; color: #fff; font-size: 18px; font-weight: 400; }} // Style roll animation, 40px for the height of li. Animate up {transition: all.5s ease-in-out; transform: translateY(-40px); } } </style>Copy the code