零基础学前端之文本

文本相关设置

• 字体加粗

  .style {
    font-weight: normal | bold;
  }
  

  normal：正常的字体，相当于number为400

  bold：粗体，相当于number为700

• 首行缩进

  .indent {
    text-indent: 2em;
  }
  

• 文本行间距

  body {
    line-height: 1.6;
  }
  

  注：行高值不能小于字体值，不然会引起字体重叠

• 文字大小和行高简写

  body {
    font: 16px/1.6 "Microsoft YaHei";
  }
  

列表初始化

• 内外边距初始化

  ul, ol, dl, dd {
    margin: 0;
    padding: 0;
  }
  

• 列表符号初始化

  ul, ol {
    list-style: none;
  }
  

  不同浏览器对列表符号的展现不同

添加省略号

• 单行文本

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

• 多行文本

  .ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }