codepen：https://codepen.io/zhangciwu/pen/poJQRXJ
两行的情况：https://codepen.io/zhangciwu/pen/NWqEpKQ
一行需要换行的情况：https://codepen.io/zhangciwu/pen/OJVapJG
一行不需要换行的情况：https://codepen.io/zhangciwu/pen/jOPQBEP
1 2 3 | <div class="center"> <div class="user-text"><span class="user-name">Some user name</span><span class="action"> Reply:</span><span>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </span></div><span class="postfix position">7 hours ago</span><span class="postfix show">7 hours ago</span> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | .center { max-height: 48px; width: 200px; margin: 0 8px; font-size: 12px; color: #42444c; line-height: 16px; position: relative; overflow: hidden; .user-text { float: left; .user-name { font-weight: bold; font-size: 12px; color: #42444c; } .action { font-size: 12px; color: #7f7f89; } } .postfix { position: absolute; bottom: 0; right: 0; display: block; font-size: 10px; color: #7f7f89; line-height: 16px; background: white; &.show::before { content: ""; position: absolute; background: linear-gradient( to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1) ); width: 20px; height: 30px; left: -20px; } &.position { padding-left: 15px; position: relative; float: left; color: transparent; } } } |