flex换行，textarea消除右下角按钮，修改input样式，多行文本省略号（兼容vue不生效），英文和数字强制换行，滚动条样式修改

无所事事的小老弟

已于 2022-12-14 14:01:49 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： css vue html css3

于 2019-06-26 16:37:38 首次发布

本文链接：https://blog.youkuaiyun.com/fengkui347235/article/details/93750759

前端笔记专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了CSS中鲜为人知但极其实用的技巧，包括解决flex布局多余换行问题，消除textarea右下角的扩展按钮，修改input提示字样式，实现placeholder提示换行，通过点击链接调用手机拨号，文本超出时显示省略号，英文和数字强制换行，以及自定义滚动条样式等。这些技巧将帮助前端开发者提升网页设计的细节和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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提示换行

&#10 换行符;

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

<a  href="tel:+手机号码"></a>;

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; /*连续的数字或者英文就会不换行 得使用强制换行*/

8.修改滚动条样式；

/*定义滚动条样式（高宽及背景）*/
::-webkit-scrollbar {
    width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
    background: #007acc;
}
/*定义滚动条轨道（凹槽）样式*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
    border-radius: 3px;
}
/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    height: 100px;    /* 滚动条滑块长度 */
    background-color: #ccc;
}