2019-12-13

1. -webkit-line-clamp是一个不规范的属性（unsupported WebKit property），它没有出现在CSS规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

    display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。

    -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

    text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本

i.单行文本溢出用省略号显示：

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

ii.多行文本溢出用省略号显示：

    display: -webkit-box;

    word-break: break-all

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;

    text-overflow: ellipsis

2. data-*属性包括两部分：

    属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

    属性值可以是任意字符串

    data-* 属性用于存储页面或应用程序的私有自定义数据。

    data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力

3. box-orient 属性规定框的子元素应该被水平或垂直排列。

4.-font-smoothin属性优化整个网页的字体让它更加美观