微信小程序布局Q&A（更新中）2017.01.20

注：只有CSS哦！！！

一、设置了text-indent属性，首行文本没有缩进效果

官方说明：text-indent用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

解决方案：加上display:inline-block或者display:block改变元素生成的显示框类型

.maomao{
    display:inline-block    /*行内块级元素*/
    display:block            /*块级元素*/
}

二、超出部分显示省略号（单行与多行）

解决方案：

/*单行*/
.maomao{
    display:block            /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/*多行*/
.maomao{
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;        /*这个数字是设置要显示省略号的行数*/
    -webkit-box-orient:vertical;
}

三、flex布局上使用单行超出部分显示省略号不但没有省略号反而破坏了页面布局

解决方案：改用多行超出部分显示省略号，设置行数为1即可。

四、使用用模板，模板使用的CSS运行时，没应用上？

解决方案：

（一）将模板使用的CSS样式写在公用样式表中（app.wxss）

（二）哪个页面调用的模板页面就在哪个页面的样式表文件中写模板样式

例子：在index.wxml中调用模板文件template.wxml，就将模板文件的CSS样式写在index.wxss中

（三）先在模板中定义对应的CSS样式，再在所调用页面的.wxss文件中把模板的CSS文件import进去

具体使用方式见：关于模板的使用，模板CSS样式的应用

五、更新中！！！