一些意想不到的小bug。

标签：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