CSS文本单行溢出和多行溢出样式

最新推荐文章于 2024-04-28 17:46:18 发布

前端小菜鸟 zZ

最新推荐文章于 2024-04-28 17:46:18 发布

阅读量322

点赞数 5

分类专栏： CSS常用样式汇总文章标签： css 前端

本文链接：https://blog.csdn.net/g841805/article/details/137592476

版权

CSS常用样式汇总专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、单行溢出

1.代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <style>
        #div2{
          overflow: hidden;
          white-space: nowrap;/*强制不换行*/
          text-overflow:ellipsis;/*超出的部分用省略号代替*/
          /* word-wrap: break-word; *//*当行达到最长时，将最后一个单词截断*/
        }
    </style>
  </head>

  <body>
    <div id="div2" style="width: 500px;height: 100px;">hello world hello world hello world hello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello worldhello world hello world hello world</div>
  </body>
  <script async type="text/javascript">
    // 填写JavaScript
  </script>
</html>

2.效果

二、多行溢出

1.代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <style>
        #div1{
        overflow: hidden; 
        text-overflow: ellipsis;/*超出的部分用省略号代替*/
        display: -webkit-box;/*弹性伸缩和字模型显示*/
        -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
        -webkit-line-clamp: 4;/*限制在一个快元素显示的文本行数*/
        }
    </style>
  </head>

  <body>
    <div id="div1" style="width: 500px;">今年的《政府工作报告》提出，“积极培育智能家居、文娱旅游、体育赛事、国货‘潮品’等新的消费增长点”。各地紧跟踏春赏花消费需求新趋势，结合本地产业特点，创新举办多样的赏花活动，打造更加丰富的赏花体验，进一步激发了人们的消费热情。
      走进各大景区，如今的文旅市场有文化味，更有沉浸感。在河南洛阳，身穿汉服，徜徉花海，是许多年轻人追求的时尚。在南京莫愁湖公园，“海棠+国风”的海棠花会上，制绒花、刻版画、绘团扇、植物拓印等传统工艺，让人们感受传统文化魅力。在江西婺源严田村，两列赏花“小火车”载着游客开进油菜花田，带来沉浸式体验。在云南大理，院子里有花园的民宿深受欢迎，客人足不出户就能感受春天的美好。
      踏春赏花的“火”，更离不开美丽中国建设非凡成果的巨大支撑。
      在城市，森林公园、湿地公园、郊野公园成为市民赏花好去处，漫步其中几步一景；在乡村，美丽乡村建设持续推进，山清水秀、绿树成荫、鸟语花香的景色越来越多…生态文明建设深入推进，不仅增加了文旅市场有效供给，也实现“生态美”到“生态富”，让“绿色颜值”变为“金色价值”，添彩人民美好生活。
      当前，文旅市场消费潜力仍然很大。随着一系列促消费政策落地见效，更多地方把握多样性、个性化的文旅消费升级特点，推动自然景观和人文资源更好结合，实现田园休闲、康养度假、艺术美育等多元旅游融合发展，激发文旅市场更大发展活力。</div>
    <hr>
  </body>
  <script async type="text/javascript">
    // 填写JavaScript
  </script>
</html>