码迷,mamicode.com
首页 > 其他好文 > 详细

一些意想不到的小bug。

时间:2018-07-06 01:34:36      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:spl   splay   display   white   换行   overflow   多个   一个   play   

一,当if的时候,很容易忘记相对的else,从而出现bug,要将背面消息考虑全面。
二,多个元素在同一行布局的时候,要考虑文字的换行还是省略号代替。

例如:左边一个文字,宽度不固定,右边一个图形,宽度固定。左边文字多的时候,在小屏手机上不换行,用省略号代替,然而在大屏手机上还可以显示比小屏手机多一些字数,这样保证所有元素对齐并且保持在一行。
结构:

<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;//省略号代替
}

一些意想不到的小bug。

标签:spl   splay   display   white   换行   overflow   多个   一个   play   

原文地址:https://www.cnblogs.com/this-xiaoming/p/9270941.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!