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.效果

相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript