有关文本CSS样式

文本溢出省略

  1. <style>
  2.   /* 单行文本溢出 */
  3.   p {
  4.     width: 100px;
  5.     white-space: nowrap;
  6.     overflow: hidden;
  7.     text-overflow: ellipsis;
  8.   }
  10.   /* 多行文本溢出 */
  11.   span {
  12.     width: 100px;
  13.     display: -webkit-box;
  14.     /* 布局箱子 方向为垂直 */
  15.     -webkit-box-orient: vertical;
  16.     /* 线夹 */
  17.     -webkit-line-clamp: 3;
  18.     overflow: hidden;
  19.   }
  20. </style>
  22. <body>
  23.   <!-- 单行文本省略 -->
  24.   <p>你好shijie世界你好shijie世界你好shijie世界你好shijie世界你好shijie世界</p>
  25.   <span>你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界</span>
  26. </body>

文本换行问题

  • word-break:break-all: 只对英文起作用, 以字母作为换行依据
  • word-wrap:break-word: 只对英文起作用, 以单词作为换行依据
  • white-space:pre-wrap: 只对中文起作用, 强制换行
  • white-space:nowrap: 强制不换行, 都起作用
  1. <style>
  2.   p {
  3.     width: 200px;
  4.     white-space: pre-wrap;
  5.   }
  6. </style>
  7. <p>ruguogaiwenbenkuangzhongdecishizifuzebujinxinghuanhangcaozuo</p>

文字的阴影text-shadow

  • 参数介绍:x偏移量, y偏移量, 模糊程度, 颜色

文字之间的间距

  • text-indent表示段落的缩进距离, letter-spacing表示的是字与字之间的间距

文本竖向排列

  1. /* // 单列展示时 */
  2. p {
  3.   width: 25px;
  4.   line-height: 18px;
  5.   height: auto;
  6.   font-size: 12px;
  7.   padding: 8px 5px;
  8.   word-wrap: break-word;
  9.   /*英文的时候需要加上这句，自动换行*/
  10. }
  12. /* // 多列展示时 */
  13. span {
  14.   height: 210px;
  15.   line-height: 30px;
  16.   text-align: justify;
  17.   writing-mode: vertical-lr;
  18.   writing-mode: tb-lr;
  19.   /* //writing-mode: vertcal-rl; -- 从右向左
  20. //writing-mode: tb-rl; -- 从右向左 */
  21. }

文本渐变效果

  1. -webkit-background-clip: text;
  2. -webkit-text-fill-color: transparent;
  3. background-image: linear-gradient(to right, #ec2239, #40a4e2, #ea96f5);

设置placeholder样式

  • 兼容不同的浏览器的问题:-webkit-, -ms-, -o-, -moz-
  • input::-[兼容的内核名称]-input-placeholder

滚动条问题

ios页面滑动卡顿的问题

  1. body,
  2. html {
  3.   -webkit-overflow-scrolling: touch
  4. }

设置滚动条样式

  1. /* 定义整个滑动条的宽度和高度 */
  2. body::-webkit-scrollbar {
  3.   width: 5px;
  4.   height: 20px;
  5. }
  7. /* 定义滑块的样式 */
  8. body::-webkit-scrollbar-thumb {
  9.   border-radius: 10px;
  10.   background-color: #000;
  11. }
  13. /* 定义滑块里面的轨道 */
  14. body::-webkit-scrollbar-track {
  15.   box-shadow: inset 0 0 10px #ccc;
  16.   border-radius: 10px;
  17.   background-color: rgb(151, 234, 240);
  18. }

实现隐藏滚动条 同时又可以滚动

  1. body::-webkit-scrollbar {
  2.   display: none;
  3.   /* Chrome Safari */
  4. }
  6. body {
  7.   scrollbar-width: none;
  8.   /* firefox */
  9.   -ms-overflow-style: none;
  10.   /* IE 10+ */
  11.   overflow-x: hidden;
  12.   overflow-y: auto;
  13. }

onerror处理图片异常

  • 如果图片出现异常, 将新的图片地址赋给当前的img标签src属性并且将当前的onerror指令设为空, 以免进入死循环情况
  1.   <img src="" onerror="this.src='https://tva3.sinaimg.cn/large/0072Vf1pgy1foxloigdl2j31kw0w0kib.jpg';this.onerror=null" />

用户有关的事件

使得元素鼠标事件失效

  1. button {
  2.   pointer-events: none;
  3.   cursor: default
  4. }

禁止用户选择页面中的内容

  1. .text {
  2.   -webkit-touch-callout: none;
  3.   -webkit-user-select: none;
  4.   -khtml-user-select: none;
  5.   -moz-user-select: none;
  6.   -ms-user-select: none;
  7.   user-select: none;
  8. }

开启硬件加速GPU

  1. transform: translateZ(0);

页面动画出现闪烁问题

  1. /* 第一种 */
  2. -webkit-backface-visibility: hidden;
  3. backface-visibility: hidden;
  4. -webkit-perspective: 1000;
  5. perspective: 1000;
  7. /* 第二种 */
  8. -webkit-transform: translate3d(0, 0, 0);
  9. transform: translate3d(0, 0, 0);

字母大小写转换

  1. p {
  2.   text-transform: uppercase
  3. }
  5. // 将所有字母变成大写字母
  6. p {
  7.   text-transform: lowercase
  8. }
  10. // 将所有字母变成小写字母
  11. p {
  12.   text-transform: capitalize
  13. }
  15. // 首字母大写
  16. p {
  17.   font-variant: small-caps
  18. }
  20. // 将字体变成小型的大写字母

解决vertical-align属性不生效

  • 在使用vertical-align:middle实现垂直居中的时候, 经常会发现不生效的情况. 这里需要注意它生效需要满足的条件:

作用环境:父元素设置line-height. 需要和height一致. 或者将display属性设置为table-cell, 将块元素转化为单元格.
作用对象:子元素中的inline-block和inline元素.