| commit | author | age | ||
| bf6fbe | 1 | <template> |
| L | 2 | <div class="blog-right-side-container"> |
| 3 | <div> | |
| 4 | <span class="blog-right-side-portion-title">{{title}}</span> | |
| 5 | </div> | |
| 6 | <div class="blog-right-side-scroll-portion"> | |
| 7 | <div class="blog-right-side-meta" v-for="item in list"> | |
| 8 | <div> | |
| 9 | <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a> | |
| 10 | </div> | |
| 11 | </div> | |
| 12 | </div> | |
| 13 | </div> | |
| 14 | ||
| 15 | </template> | |
| 16 | ||
| 17 | <script> | |
| 18 | export default { | |
| 19 | props: { | |
| 20 | title: "", | |
| 21 | list: "" | |
| 22 | }, | |
| 23 | data() { | |
| 24 | return { | |
| 25 | ||
| 26 | } | |
| 27 | } | |
| 28 | } | |
| 29 | </script> | |
| 30 | ||
| 31 | </script> | |
| 32 | ||
| 33 | <style lang="less"> | |
| 34 | /*右边的部分*/ | |
| 35 | .blog-right-side-meta span { | |
| 36 | /*word-break: keep-all;*/ | |
| 37 | /*word-wrap: break-word;*/ | |
| 38 | color: #999; | |
| 39 | font-size: 13px; | |
| 40 | display: block; | |
| 41 | overflow: hidden; | |
| 42 | text-overflow: ellipsis; | |
| 43 | ||
| 44 | white-space: nowrap; | |
| 45 | /* normal文本换行*/ | |
| 46 | ||
| 47 | word-break: keep-all; | |
| 48 | transition-property: background-color; | |
| 49 | transition-duration: .2s; | |
| 50 | transition-timing-function: ease-in-out; | |
| 51 | transition-delay: 0s; | |
| 52 | } | |
| 53 | ||
| 54 | div .blog-right-side-meta a span:hover { | |
| 55 | background: #5FB878; | |
| 56 | color: #fff; | |
| 57 | white-space: normal; | |
| 58 | word-break: break-word; | |
| 59 | /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/ | |
| 60 | height: 20%; | |
| 61 | z-index: 600; | |
| 62 | } | |
| 63 | </style> | |
