一,当if的时候,很容易忘记相对的else,从而出现bug,要将背面消息考虑全面。
二,多个元素在同一行布局的时候,要考虑文字的换行仍是省略号代替。布局
例如:左边一个文字,宽度不固定,右边一个图形,宽度固定。左边文字多的时候,在小屏手机上不换行,用省略号代替,然而在大屏手机上还能够显示比小屏手机多一些字数,这样保证全部元素对齐而且保持在一行。
结构:flex
<div class="container"> <div class="left-text"> <span>此处的文字字数不固定</span> </div> <div class="right-graf"> <i></i> </div> </div>
style: .container: { display: flex; flex-item: center; } .right-graf: { width: 120px;//固定宽度 i { 箭头样式;省略。。。。 } } .left-text: {//此样式能够保证在小屏手机上不换行,用省略号代替多余的文字,在大屏手机上能够显示更多文字。 max-width: 160px;//此宽度为在小屏手机例如ipone5上在右边宽度固定的状况下,可以使文字不换行的最大宽度 white-space: nowrap;//不换行 overflow: hidden; text-overflow: ellipsis;//省略号代替 }