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

news2024/11/27 2:20:35

一、单行溢出

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>

2.效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1582329.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

gitee和idea集成

gitee和idea集成

1 集成插件 2 配置账号密码 3 直接将项目传到仓库 4直接从gitee下载项目
阅读更多...
【Linux】有关时间的命令（date、timedatectl）

【Linux】有关时间的命令（date、timedatectl）

专栏文章索引&#xff1a;Linux 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、data命令 1.介绍 2.常用参数 3.常用选项 二、timedatectl命令 1.介绍 2.常用子命令 一、data命令 1.介绍 date命令用于显示或设置系统的时间与日期&#xff0c;语法格式为&a…
阅读更多...
axios取消请求，解决接口返回顺序错乱问题

axios取消请求，解决接口返回顺序错乱问题

下面的方案适用于系统中的某个请求的取消&#xff0c;项目的请求使用 axios 封装 使用场景&#xff1a;当页面有多个 tab&#xff0c;例如年、月、日的列表数据&#xff0c;当点击切换的时候要获取对应的数据&#xff0c;此时如果快速点击在tab直接反复横跳会出现下面的问题&am…
阅读更多...
java对象是怎么在jvm中new出来的，在内存中查看java对象成员变量字段属性值

java对象是怎么在jvm中new出来的，在内存中查看java对象成员变量字段属性值

java对象是怎么在jvm中new出来的 查看java对象字段属性在内存中的值 java 对象 创建 流程 附上java源码 public class MiDept {private int innerFiled999;public MiDept() {System.out.println("new MiDept--------------");}public String show(int data) {Sy…
阅读更多...
40.Python从入门到精通—Python3 JSON 数据解析 Python3 日期和时间 什么是时间元组？ 获取当前时间 获取格式化的时间

40.Python从入门到精通—Python3 JSON 数据解析 Python3 日期和时间 什么是时间元组？ 获取当前时间 获取格式化的时间

40.Python从入门到精通—Python3 JSON 数据解析 Python3 日期和时间 什么是时间元组&#xff1f; 获取当前时间 获取格式化的时间 Python3 JSON 数据解析Python3 日期和时间什么是时间元组&#xff1f;获取当前时间获取格式化的时间 Python3 JSON 数据解析 Python3 中可以使用…
阅读更多...
大数据基本名词

大数据基本名词

目录[-] 1.1. 1. Hadoop1.2. 2. Hive1.3. 3. Impala1.4. 4. Hbase1.5. 5.hadoop hive impala hbase关系1.6. 6. Spark1.7. 7. Flink1.8. 8. Spark 和 Flink 的应用场景 1. Hadoop 开源官网&#xff1a;https://hadoop.apache.org/ Hadoop是一个由Apache基金会所开发的分…
阅读更多...
宝宝眼睛轻揉小心，健康成长路上的关怀指南

宝宝眼睛轻揉小心，健康成长路上的关怀指南

引言&#xff1a; 宝宝的眼睛是他们认知世界的窗户&#xff0c;眼睛的健康对于他们的成长至关重要。然而&#xff0c;有时我们会发现宝宝揉眼睛的情况&#xff0c;这可能会引起家长的担忧。本文旨在探讨新生儿揉眼睛的注意事项&#xff0c;以及如何正确处理这种情况&#xff0c…
阅读更多...
谷歌推出适用于安卓设备的“Find My Device”网络，功能类似苹果Find My

谷歌推出适用于安卓设备的“Find My Device”网络，功能类似苹果Find My

谷歌今日推出了适用于安卓设备的“Find My Device”网络&#xff0c;其功能类似于苹果的“Find My”网络&#xff0c;旨在帮助用户定位丢失、被盗的安卓产品。 安卓的“Find My Device”网络可以利用数以亿计运行 Android 9 或更高版本的安卓设备&#xff0c;通过蓝牙信号追踪丢…
阅读更多...
mysql 查询实战-变量方式-解答

mysql 查询实战-变量方式-解答

对mysql 查询实战-变量方式-题目&#xff0c;进行一个解答。&#xff08;先看题&#xff0c;先做&#xff0c;再看解答&#xff09; 1、查询表中⾄少连续三次的数字 1&#xff0c;处理思路 要计算连续出现的数字&#xff0c;加个前置变量&#xff0c;记录上一个的值&#xff0c…
阅读更多...
FHE全同态加密简介

FHE全同态加密简介

1. 何为FHE&#xff1f; FHE (Fully homomorphic encryption)&#xff1a; 是一种隐私技术&#xff0c;支持直接对密文进行计算&#xff0c;而无需对密文先解密再计算。即&#xff0c;任何第三方或云厂商&#xff0c;都可对敏感信息的密文进行处理&#xff0c;而无需访问密文内…
阅读更多...
Spring 之 IoC概述

Spring 之 IoC概述

目录 1. IoC概述 1.1 控制反转 1.2 依赖注入 2. IoC容器在Spring中的实现 2.1 BeanFactory 2.2 ApplicationContext 2.2.1 ApplicationContext的主要实现类 1. IoC概述 全称&#xff1a;Inversion of Control&#xff0c;译为 “控制反转” Spring通过IoC容器来管理所有…
阅读更多...
【DM8】物化视图

【DM8】物化视图

物化视图 (MATERIALIZED VIEW) 是目标表在特定时间点上的一个副本&#xff0c;占用存储空间&#xff0c;即将查询出来的数据存储在数据库中。 当所依赖的一个或多个基表的数据发生更新&#xff0c;必须启用刷新机制才能保证数据是最新的。 物化视图可以用于数据复制&#xff08…
阅读更多...
Unity 遮罩

Unity 遮罩

编辑器版本 2017.2.3f1 学习Unity的三张遮罩方式 1. Mask 遮罩方式 首先&#xff0c;在界面上创建2个Image&#xff0c;一个命名Img_Mask,大小设置 400* 400&#xff0c; 一个命名Img_Show,大小设置500*500。 然后&#xff0c;给 Img_Mask添加Mask,选择Img_Mask,点击Add Com…
阅读更多...
宁波宠物展|2024中国(宁波)国际宠物用品博览会

宁波宠物展|2024中国(宁波)国际宠物用品博览会

中国(宁波)国际宠物用品博览会 地点&#xff1a;宁波国际会展中心 时间&#xff1a;2024年11月14-16日 主办单位:凤麟展览(宁波)有限公司 协办单位:浙江省宠物产业协会 宁波市跨境电子商务协会 宁波欧德国际商务咨询服务有限公司 宁波扬扬会议展览有限公司 20000方展览…
阅读更多...
获取.apk文件的MD5签名、包名、版本号工具

获取.apk文件的MD5签名、包名、版本号工具

​​​​​​​https://download.csdn.net/download/Kern_/89112540https://download.csdn.net/download/Kern_/89112540 点击上方链接下载 ApkSignore.jar&#xff0c;按照一下教程使用&#xff1b; 前提要素&#xff1a; 需要电脑安装了jdk及配置了jdk环境变量 安装教程&…
阅读更多...
ubuntu20.04.6安装sshd服务,并连接到远程服务器

ubuntu20.04.6安装sshd服务,并连接到远程服务器

文章目录 sshd 是 OpenSSH 服务器的守护进程OpenSSH下载在 Ubuntu 上&#xff0c;可以按照以下步骤来管理 sshd 服务 防火墙开启22端口使用Mobaxterm链接服务器 sshd 是 OpenSSH 服务器的守护进程 它负责提供远程登录和安全的 shell 服务。通过启动 sshd 服务&#xff0c;可以…
阅读更多...
LangChain - Chain

LangChain - Chain

文章目录 1、概览为什么我们需要链? 2、快速入门 (Get started) - Using LLMChain多个变量 使用字典输入在 LLMChain 中使用聊天模型&#xff1a; 3、异步 API4、不同的调用方法__call__调用仅返回输出键值 return_only_outputs只有一个输出键 run只有一个输入键 5、自定义cha…
阅读更多...
Git分布式版本控制系统——Git常用命令（一）

Git分布式版本控制系统——Git常用命令（一）

一、获取Git仓库--在本地初始化仓库 执行步骤如下&#xff1a; 1.在任意目录下创建一个空目录&#xff08;例如GitRepos&#xff09;作为我们的本地仓库 2.进入这个目录中&#xff0c;点击右键打开Git bash窗口 3.执行命令git init 如果在当前目录中看到.git文件夹&#x…
阅读更多...
第一届长城杯初赛部分wp（个人解题思路）

第一届长城杯初赛部分wp（个人解题思路）

目录 Black web babyrsa2 APISIX-FLOW cloacked 本人不是很擅长ctf&#xff0c;这只是我自己做出的西部赛区部分题的思路&#xff0c;仅供参考 Black web 访问http://192.168.16.45:8000/uploads/1711779736.php 蚁剑连接 访问/var/www/html/u_c4nt_f1nd_flag.php babyr…
阅读更多...
Java中利用BitMap位图实现海量级数据去重

Java中利用BitMap位图实现海量级数据去重

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 前言 什么是BitMap&#xff1f;有什么用&#xff1f; 基本概念 位图的优势 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023