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

1、单行文本显示省略号

html:

  <p>我的热情,好像一把火,燃烧了整个沙漠~~~</p>
css:
  p{
    overflow: hidden;    //超出部分隐藏
    text-overflow: ellipsis;  //省略号
    white-space: nowrap;  //一行显示
    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{
    1000px;     //固定宽度
    display: -webkit-box;  //将容器变成弹性盒子      
    -webkit-box-orient: vertical;//排列方式
    -webkit-line-clamp: 9;  //显示几行
    overflow: hidden;    //超出部分隐藏
  }
原文地址:https://www.cnblogs.com/naxiaoming/p/8617928.html