字体和文本样式

首先是代码演示：

    p {
      font-size: 30px;
      
      font-weight: 400;
      
      font-style: italic;
      
      font-family: sans-serif;

      font: italic 400 30px sans-serif;
     
      text-indent: em;
    
      text-align: center;
      
      text-decoration: underline;
     
      text-shadow: 5px 5px 5px #000;

      line-height: 1;
    }

在p标签选择器中，
font-size控制字体大小，以数字+px（像素）控制；

font-weight控制字体粗细，大小为400时字体粗细正常，大小为700时是加粗样式；

font-style控制字体是否倾斜，值默认为normal。可以设置为italic（倾斜）；

font-family设置字体属性，属性值可以是具体字体（如宋体），也可以是字体系列：有两种类型的字体系列名称：

family-name 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
generic-family通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。

如果设置的字体网站不支持则选择操作系统默认的字体，如windows的默认字体是微软雅黑。sans-serif是无衬线字体，笔画无装饰，常用于网站，serif衬线字体就是有装饰笔画的字体，monospace是等宽字体，一般用于程序代码编写；
以上属性可以连写在font属性上，先设置是否倾斜，其次设置加粗样式，然后设置字体大小，最后设置字体系列。顺序如上代码，只能省略前两个设置；

text-indent设置文本缩进的属性，取值可以是数字+px也可以是数字+em（1em=当前标签font-size大小）；

text-align设置文本水平对齐的属性，left，center，right分别代表左，水平居中，右对齐，如果要让文本水平居中，要给标签的父元素设置该属性；

text-decoration修饰文本属性，取值如下：underline（下划线）、line-through（删除线）、overline（上划线）、none（无装饰线）。开发过程中多会使用text-decoration: none;清除a标签（超链接）的下划线；

text-shadow: h-shadow v-shadow blur color
h-shadow:必须，水平偏移量。允许负值 v-shadow:必须，垂直偏移量。允许负值 blur:可选，模糊度 color:可选，阴影颜色

line-height 设置行高的属性，取值可以是数字+px也可以是纯数字（当前标签font-size的倍数）
单行文本垂直居中可以设置line-height:文字父元素高度，网页精准布局时可以使用line-height: 1;取消上下间距
如需要行高和font连写，格式为font:style weight size/line-height family
经上述代码美化，p标签内的文字浏览器效果将会如图所示:

文字显示溢出的解决方法

单行溢出文字显示省略号

首先我们来看这张图：

图中的效果由下面的代码形成

    div {
      width: 150px;
      height: 80px;
      background-color: pink;
      margin: 100px auto;
    }
    
    <div>啥也不说，此处省略一万字</div>

现在有一个需求，不改变粉色区域大小的情况下，将文字都限制到一行显示，就需要如下代码约束：

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

white-space控制文字显示换行，值为normal则显示不全自动换行，nowrap则文字显示不全也必须强制一行内显示；
overflow控制超出部分隐藏；
text-overflow控制文字溢出的时候以什么形式显示，值为ellipsis时则以省略号显示。
加以上述代码约束后，原先的需求就形成了:

多行溢出文字显示省略号

还是先看图：

图中的效果由下面的代码形成

    div {
      width: 150px;
      height: 80px;
      background-color: pink;
      margin: 100px auto;
    }
    
    <div>
    啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
  </div>

文字超出了粉色盒子区域，很不美观，在不改变盒子大小的情况下，该如何做到限制多行显示呢？
先上代码：

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

前两个属性在单行限制已经介绍过了； display控制盒子显示模式，值为-webkit-box 则将显示模式变成弹性伸缩盒子模型显示模式；
-webkit-line-clamp限制在一个块元素显示的文本的行数，值为数字；
-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式。值为vertical则表示从顶部向底部垂直布置子元素。
经过上述代码美化后，粉色盒子内的文字就变成了这样：

css基础之文字样式

字体和文本样式

文字显示溢出的解决方法

单行溢出文字显示省略号

多行溢出文字显示省略号

感谢支持！