单行与多行文本显示省略号

1、单行文本显示省略号

html:

　　<p>我的热情，好像一把火，燃烧了整个沙漠~~~</p>

css:

　　p{

　　　　overflow: hidden;　　　　//超出部分隐藏

　　　　text-overflow: ellipsis;　　//省略号

　　　　white-space: nowrap;　　//一行显示

　　　　width:320px;　　　　　　//固定宽度

　　}

2、多行文本显示省略号

html:

<p>

核爆神曲（中文词）

远处的浓烈硝烟，点缀着寂寞荒原像笔尖、一点一点，画出崎岖的曲线。夕阳下你的侧脸、渐行渐远，只剩懦弱的我，躲在镜子里面。 血的伤痛，泪的汹涌，狂风之中撕裂。温柔微笑，温柔拥抱，仿佛还在昨天。凌乱厮杀，凛冽伤疤，充满我的视野。闭上双眼，假装看不见。『I say cry,I say lie』『l say lie the end』是谁嚎哭消失在眼前『War，I hate war』挣扎过~喔~，无法拜托命运的枷锁。恐惧在脑海侵袭，绝望在现实逃避，不敢回忆，一滴一滴，失去最后的勇气。呼唤和平的声音，软弱无力，一轮绯红的月，伴着日落升起。胸口的痛，鲜红的血，渐渐吞噬一切。听过的谎，受过的伤，再次复习一遍。昨天的罪，今天的泪，没有任何差别。睁开双眼，看不到明天。『I say cry,I say lie』『l say lie the end』是谁又把战争在重演『War，I hate war』伤痛过~喔~，留下千疮百孔的斑驳。血流干了吗？伤受够了吗？没有人说话，忏悔随眼泪慢慢蒸发。要救赎了吗？要结束了吗？红色天空下，我等不到诚恳的回答。胸口的痛，鲜红的血，渐渐吞噬一切。听过的谎，受过的伤，再次复习一遍。昨天的罪，今天的泪，没有任何差别。睁开双眼，看不到明天『I say cry,I say lie』『l say lie the end』是谁嚎哭消失在眼前『War，I hate war』挣扎过~喔~，无法拜托命运的枷锁。生命是什么？能否告诉我？蔓延的战火，画出死亡轮廓。幸福是什么？能否告诉我？和平的承诺，为何如此脆弱~~~~~~~~

</p>

css:

　　p{

　　　　width:1000px;　　　　　//固定宽度

　　　　display: -webkit-box;　　//将容器变成弹性盒子　　　　　　

　　　　-webkit-box-orient: vertical;//排列方式

　　　　-webkit-line-clamp: 9;　　//显示几行

　　　　overflow: hidden;　　　　//超出部分隐藏

　　}