单行和多行文本溢出省略号显示!!!

单行文本溢出显示省略号

    <div class="p">
      《出师表》以恳切的言辞,针对当时的局势,反复劝勉刘禅要继承先主刘备的遗志,开张圣听,赏罚严明,亲贤远佞,以完成“兴复汉室”的大业,表现了诸葛亮“北定中原”的坚强意志和对蜀汉忠贞不二的品格。
    </div>
    
      .p {
        width: 200px;
        background: red;
        white-space: nowrap; /*文本强制不换行*/
        text-overflow: ellipsis; /*文本溢出显示省略号*/
        overflow: hidden; /*必须要结合盒子溢出*/
      }

多行文本溢出

    <div class="p">
      《出师表》以恳切的言辞,针对当时的局势,反复劝勉刘禅要继承先主刘备的遗志,开张圣听,赏罚严明,亲贤远佞,以完成“兴复汉室”的大业,表现了诸葛亮“北定中原”的坚强意志和对蜀汉忠贞不二的品格。
    </div>

      .p{
      width:200px;
      /*必须结合的属性,将对象作为弹性伸缩盒对象的子元素的排列仿古式*/
      display:-webkit-box;/*必须结合的属性,将元素设为弹性盒子模式(复古写法)*/
      -webkit-box-orient:vertical;/*必须结合的属性,设置弹性盒子对象的子元素,排列方式*/
      text-overflow:ellipsis;/*文本溢出显示省略号*/
      -webkit-line-clamp:3;/*例如超过2行显示省略号*/
      overflow:hidden; /*必须要结合盒子溢出*/
      }
posted @ 2021-01-30 20:54  残酷^现实  阅读(68)  评论(0编辑  收藏  举报