【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式
代码:

<style> 
p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip;
}p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: ellipsis;
}p.test3 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: ellipsis;
}p.test3:hover {overflow: visible;
}p.test4 {width: 200px; border: 1px solid #000000;overflow: hidden;word-wrap: break-word;
}
</style>
</head>
<body><h2>text-overflow: clip:  裁剪</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p><h2>text-overflow: ellipsis 省略号(...)</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p><h2>text-overflow: visible 显示</h2>
<p class="test3">这里有一些无法容纳在框中的长文本</p><h2> word-wrap: break-word; 换行</h2>
<p class="test4">这里有一些无法容纳在框中的长文本</p>
</body>

渲染效果:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年Q2天猫洗衣机行业品牌销售排行榜(淘宝天猫数据)

洗衣机作为普及率极高的家电之一&#xff0c;如今已经成为我们生活中不可或缺的一部分。由于洗衣机的普及率较高&#xff0c;因此虽其市场规模庞大&#xff0c;但如今要使洗衣机呈现规模化增长的可能性还是比较小的。不过&#xff0c;随着用户需求及产品的升级&#xff0c;洗衣…

【C++中的pair类型】用于将两个不同类型的元素组合成一个单元,即key-value

文章目录 1、定义和初始化2、使用方式 1、定义和初始化 pair<type1, type2> p; // 初始化方法有3种 pair<int, string> p make_pair(1, "one"); pair<int, string> p {1, "one"}; pair<int, string> p(1, "one");2、…

【docker】 运行bytetrack 构建映像失败 使用docker删除之前构建的映像

1 Docker删除docker build失败的images docker images | grep "<none>" | awk {print $3} | xargs docker rmi 2 Docker删除启动失败的image docker ps -a | awk {if (length($2) 12){print $1}} | xargs docker rm

Apipost接口测试断言

常用断言直接点右边栏 断言list&#xff1a; // 断言json数组长度 apt.assert(response.json.data.data.length20); // 断言json数组中的某个对象 apt.assert(response.json.data.data[0].docid1482);

EvilBox One靶场笔记

EvilBox: One靶场笔记 信息收集 先fscan找主机192.168.1.102 namp扫端口 开放80,22端口 然后扫目录 └─$ gobuster dir -r -u http://192.168.1.102/ -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x php,txt,bak,html在扫secret目录&#xff0c;找…

c++ 子数组动态规划问题

1.最大子数组和 力扣 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5…

基于Kubeadm部署k8s集群:下篇

继续上篇内容 目录 7、安装flannel 8、节点管理命令 三、安装Dashboard UI 1、部署Dashboard 2、开放端口设置 3、权限配置 7、安装flannel Master 节点NotReady 的原因就是因为没有使用任何的网络插件&#xff0c;此时Node 和Master的连接还不正常。目前最流行的Kuber…

微服务04-elasticsearch

1、es概念 1.1 文档和字段 elasticsearch是面向**文档(Document)**存储的,可以是数据库中的一条商品数据,一个订单信息。文档数据会被序列化为json格式后存储在elasticsearch中: 而Json文档中往往包含很多的字段(Field),类似于数据库中的列。 1.2 索引和映射 索引(…

Visual Studio 2019 详细安装教程(图文版)

前言 Visual Studio 2019 安装包的下载教程、安装教程 教程 博主博客链接&#xff1a;https://blog.csdn.net/m0_74014525 关注博主&#xff0c;后期持续更新系列文章 ********文章附有百度网盘安装包链接********* 系列文章 第一篇&#xff1a;Visual Studio 2019 详细安装教…

Spark(39):Streaming DataFrame 和 Streaming DataSet 输出

目录 0. 相关文章链接 1. 输出的选项 2. 输出模式(output mode) 2.1. Append 模式(默认) 2.2. Complete 模式 2.3. Update 模式 2.4. 输出模式总结 3. 输出接收器(output sink) 3.1. file sink 3.2. kafka sink 3.2.1. 以 Streaming 方式输出数据 3.2.2. 以 batch …

阿拉伯数字转中文数字字符,最高支持千京

直接上代码 UtilityClass public class NumberFormatUtil {/** 中文 -> 数字对应关系 */private static final Map<Character, Integer> DIGIT_CHINA new HashMap<>();/** 数字 -> 中文对应关系 */private static final Map<Integer, Character> DIGI…

树状结构数据,筛选指定数据

问题描述&#xff1a; 应用场景和需求&#xff1a;对一个树状结构的数据&#xff0c;进行CRUD 时&#xff0c;想筛选出 树状结构数据中存在变动的部分。 操作步骤 准备需要的数据&#xff1a; 1.先拿到 你原来的树状结构数据 2.再筛选出 需要保留的数据集合id&#xff0c;也…

git push之后的撤销操作

用的是idea。 pull了代码之后&#xff0c;想撤销pull&#xff1a; push代码到个人远程仓库之后&#xff0c;又从主仓pull了一下。 点击其中一条git记录&#xff0c;然后右键单击“reset current branch ti here”,然后再点击hard push了代码到个人仓库&#xff0c;想撤销&…

开源力量再现,国产操作系统商业化的全新探索

文章目录 1. 开源运动的兴起2. 开源力量的推动3. 国产操作系统的崭露头角3.1 国产操作系统有哪些 4.国产操作系统的商业化探索5.开源力量对国产操作系统商业化的推动 操作系统作为连接硬件、中间件、数据库、应用软件的纽带&#xff0c;被认为是软件技术体系中最核心的基础软件…

Tomcat的动静分离以及多实例部署

一、动静分离 Nginx实现负载均衡的原理&#xff1a; Nginx实现负载均衡是通过反向代理实现Nginx服务器作为前端&#xff0c;Tomcat服务器作为后端&#xff0c;web页面请求由Nginx服务来进行转发。 但不是把所有的web请求转发&#xff0c;而是将静态页面请求Ncinx服务器自己来处…

竞赛项目 深度学习实现语义分割算法系统 - 机器视觉

文章目录 1 前言2 概念介绍2.1 什么是图像语义分割 3 条件随机场的深度学习模型3\. 1 多尺度特征融合 4 语义分割开发过程4.1 建立4.2 下载CamVid数据集4.3 加载CamVid图像4.4 加载CamVid像素标签图像 5 PyTorch 实现语义分割5.1 数据集准备5.2 训练基准模型5.3 损失函数5.4 归…

【Gitee的使用】Gitee的简单使用,查看/创建SSH公匙、创建版本库、拉取代码、提交代码

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 本篇文章简单介绍&#xff0c;如何在Gitee上面创建版本库、拉取…

03微服务到底是什么

一句话导读 微服务是一种架构模式&#xff0c;英文翻译 microservice&#xff0c;微服务架构的核心理念是将大型、复杂的单体应用拆分成更小的、自治的组件&#xff0c;每个组件即为一个微服务 目录 一句话导读 一、微服务的定义 二、微服务的特点 1.独立性 2.松耦合 3.可伸…

如何投诉删除360搜索下拉词?

有的企业发现自己品牌在360搜索下拉框里会展现出来一些负面词&#xff0c;如骗子、跑路、倒闭等&#xff0c;有企业咨询能不能删除360搜索下拉里的负面词&#xff1f;小马识途营销顾问分析要看具体情况&#xff0c;按经验如果是涉及诋毁诽谤的词&#xff0c;投诉到平台能够删除…

redission自定义hessian序列化

一。技术改造背景 由于之前的比较陈旧的技术&#xff0c;后面发起了技术改造&#xff0c;redis整体改后使用redisson框架。 二。问题 改造完成后&#xff0c;使用方反馈 缓存获取异常 异常信息如下 Caused by: java.io.CharConversionException: Unexpected EOF in the mid…