CSSについて、オーバーフロー省略記号などのテキスト、複数行のテキスト表示仕上げの一行

1.シングル行テキスト

---

HTML：

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

CSS：

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

効果：

2.マルチラインテキスト

---

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; //用来限制在一个块元素显示的文本的行数
}

効果：