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

相关推荐
他们叫我秃子7 分钟前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
非凡ghost8 分钟前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端
扎瓦斯柯瑞迫12 分钟前
cursor: 10分钟魔改环境、优雅获取Token
前端·javascript·后端
王六岁12 分钟前
🐍 前端开发 0 基础学 Python 入门指南:条件语句篇
前端·python
San3015 分钟前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
用户120391129472616 分钟前
从零构建一个HTML5敲击乐Web应用:前端开发最佳实践指南
前端
Violet_YSWY19 分钟前
将axios、async、Promise联系在一起讲一下&讲一下.then 与其关系
开发语言·前端·javascript
San3023 分钟前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
写代码的皮筏艇25 分钟前
JS数据类型转换
前端·javascript
Qinana27 分钟前
🌟 从 CSS 到 Stylus:打造更优雅、高效的样式开发体验
前端·javascript·css