About CSS, a single line of text, multi-line text display finishing as overflow ellipsis

1. Single-line text

---

html:

<p>关于CSS中，单行文本、多行文本溢出显示为省略号的整理关于CSS中，单行文本、多行文本溢出显示为省略号的整理</p>

css:

p {
    border: 1px solid #ccc;
    width: 300px;
    overflow: hidden;
    white-space: nowrap; //规定段落中的文本不进行换行
    text-overflow: ellipsis;
}

effect:

2. Multi-line text

---

html:

<p>关于CSS中，单行文本、多行文本溢出显示为省略号的整理关于CSS中，单行文本、多行文本溢出显示为省略号的整理关于CSS中，单行文本、多行文本溢出显示为省略号的整理</p>

css:

p {
    border: 1px solid #ccc;
    width: 300px;
    overflow: hidden;
    display: -webkit-box; //将元素作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical; //设置或检索伸缩盒子对对象的子元素的排列方式
    -webkit-line-clamp: 3; //用来限制在一个块元素显示的文本的行数
}

effect: