flex换行,textarea消除右下角按钮,修改input样式,多行文本省略号(兼容vue不生效),英文和数字强制换行

1。flex多余的换行

flex-wrap: wrap; 

2.textarea右下角的扩展按钮消除

 resize:none;

3.修改input提示字样式

::-webkit-input-placeholder { color:#999996; font-size: 3.2vw}
::-moz-placeholder { color:#999996; } /* firefox 19+ */
:-ms-input-placeholder { color:#999996; } /* ie */
input:-moz-placeholder { color:#999996; }

4.textarea placeholder提示换行


 换行符;

5.点击手机号码调用手机拨号

;

6.文本超出省略号;

单行:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*截取第三行*/
overflow: hidden;
//如果是vue项目不生效可能是有css属性被编译掉了,需要在这个属性面前加上	 /*! autoprefixer: ignore next */
 /*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
 /*! autoprefixer: ignore next */
-webkit-line-clamp: 3; /*截取第三行*/ 

7.英文和数字强制换行;

word-wrap:break-word; /*连续的数字或者英文就会不换行 得使用强制换行*/
word-break:break-all; /*连续的数字或者英文就会不换行 得使用强制换行*/

你可能感兴趣的:(前端笔记,css,vue,html)