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

一、单行溢出

1.代码

javascript 复制代码
<!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.代码

javascript 复制代码
<!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>

2.效果

相关推荐
一只小风华~3 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip8 小时前
JavaScript二叉树相关概念
前端
rannn_1119 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x9 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java9 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)10 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5