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 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia3 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
前端小巷子22 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168830 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er2 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端