Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

文本样式

给文本画阴影

  • 规则

    text-shadow: x-offset y-offset blur color;
    
  • 4个参数

    • x水平方向的阴影偏移量,正为向右,负为向左
    • y垂直方向的阴影偏移量,正为向下,负为向上
    • 阴影的模糊程度,越大越模糊,想不模糊则设0
    • 阴影的颜色

给文本描边框(很少用)

  • 规则

    text-stroke:width color;
    
  • 2个参数

    • 边框宽度
    • 边框颜色
  • 镂空效果

    • 叠加上color:transparent
  • 注意

    • 在Chrome和Firefox里要加-webkit-前缀,对的,没写错

文本溢出处理

  • 规则

    text-overflow: 取值;
    
  • 参数可取

    • ellipsis

      • 溢出时,显示省略号,隐藏多余文字
      • 要结合以下代码 才有省略号效果
        overflow: hidden;
        white-space: nowrap;
        
      • 只能实现“单行文本”的省略号效果
        • 多行文本需要js插件dotdotdot.js
    • clip

      • 溢出时,不显示省略号,将溢出文字裁切掉

溢出时强制换行

  • 规则

    word-wrap:取值;
    
  • 参数可取

    • normal

      • 默认值,自动换行
    • break-word

      • 强制换行(最常用)
      • 特点
        • 溢出后会尝试换到下一行
        • 下一行不够再单词内断句换行
        • 每一行会留下些未填满的空白

强制换行

  • 规则

    word-break: 取值;
    
  • 参数可取

    • normal

      • 默认值,自动换行
    • break-all

      • 允许在单词内换行(最常用)
      • 特点
        • 不会尝试换到下一行
        • 一旦位置不够,直接单词内切断,
        • 保证从上到下全部填满
    • keep-all

      • 只能在半角空格或连字符处换行

嵌入字体

  • 规则

    @font-face {
      font-family: 字体名称;
      src: url(字体文件路径);
    }
    
  • 注意

    • 用"字体名称"引用字体使用
    • 并不建议嵌入中文字体
      • 因为大小都10MB以上,太慢
      • 而英文字体只有几万字节