看完这篇博客，你将了解

  • line-height 基础
  • $nbsp
  • 如何实现文本两端对齐
  • 如何让单词换行
  • 如何让溢出的文本用省略号表示
  • 如何让文字垂直居中
  • 如何查找字体，引入字体
  • 如何隐藏垂直滚动条
  • 不写死 width, height 的方法
  • 图片下方有空隙怎么办

line-height

line-height 取值可以用倍数表示

line-height: 1: 意味着 div 高度(height) = 字体高度(font-size)

如果不写 line-height 的话，它默认为不同字体上设定的建议行高（如 1.2, 1.3 等）

此时：div 高度 = font-size * 建议行高

$nbsp

= no break space，就是不换行的空格

如何实现文本两端对齐？

用以下套路实现即可

  1. 给所在元素确定宽度
  2. 给所在元素加上 text-align: justify

  3. 为所在元素添加以下子类

    .el::after {
    content: '';
    display: inline-block;
    width: 100%;
}

demo：文本两端对齐 demo

如何让单词换行

当出现如

2222... 横向溢出 div 的时候，只要

.el {
    word-break: break-all;
}

就可以了

原因

不带空格的连续数字英文字母组合或一个汉字是一个单词，单词一般不会拆开换行,

比如 abcdefg 是一个单词，那么不会出现 abcd 在第一行末，efg 另起第二行始的情况

word-break: break-all 让单词拆开换行成为可能

如何让溢出的文本用省略号表示

分为两种情况记住各自的套路就行

单行文本

.el {
    white-space: nowrap;  /* 作用是让文本不换行，强行写在一行 */
    text-overflow: ellipsis;
    overflow: hidden;
}

多行文本

多用于文本展开折叠，比如网易云音乐的歌单简介里，就用到这种方法

.el {
  display: -webkit-box;
  -webkit-line-clamp: 2;  /*2 是指定的最大行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

demo：单行文本溢出省略，多行文本溢出省略

如何让文字垂直居中

方法一： height === line-height ，因为写死了高度不推荐

方法二：line-height + padding-top + padding-bottom

demo: 文字垂直居中

如何查找字体，引入字体？

  1. 查找字体：whatFont 上传图片，找到免费的字体名
  2. 引入字体：googleFont 搜索字体名，拷贝代码

在 css 引入本地字体

/* 在 @font-face 关联字体名称与路径 */
@font-face{
    font-family:windy;  /* windy 是自定义的命名 */
    src:url('../font/windy.ttf');
}
/* 然后正常使用 */
p{
    font-family:windy;  /*用上刚才我们命名的windy*/
    font-size:16px;
}

如何隐藏垂直滚动条？

margin-right: -15px;

不写死 width, height 的方法

不得不写宽度时，可以用 min-width 妥协

不得不写高度时，可以用 line-height + padding 妥协

图片下方有空隙怎么办？

  1. vertical-align: top;
  2. img {display: block;}