【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.mfbz.cn/a/75024.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入探索Spring框架:解密核心原理、IOC和AOP的奥秘

深入探索Spring框架&#xff1a;解密核心原理、IOC和AOP的奥秘 1. 理解 Spring 的核心原理1.1 控制反转&#xff08;IOC&#xff09;1.2 面向切面编程&#xff08;AOP&#xff09; 2. 深入 IOC 容器的实现机制2.1 容器的创建2.2 Bean 的生命周期2.3 依赖注入 3. 深入 AOP 的实现…

IP 协议的相关特性和数据链路层相关知识总结

目录 IP 协议的相关特性 一、IP协议的特性 二、 IP协议数据报格式 三、 IP协议的主要功能 1. 地址管理 动态分配 IP地址 NAT机制 NAT背景下的通信 IPV6 2. 路由控制​​​​​​​ 3.IP报文的分片与重组 数据链路层相关知识 1、以太网协议&#xff08;Ethernet&#xff09; 2.M…

SpringBoot系列---【SpringBoot在多个profiles环境中自由切换】

SpringBoot在多个profiles环境中自由切换 1.在resource目录下新建dev&#xff0c;prod两个目录&#xff0c;并分别把dev环境的配置文件和prod环境的配置文件放到对应目录下&#xff0c;可以在配置文件中指定激活的配置文件&#xff0c;也可以默认不指定。 2.在pom.xml中最后位置…

php从静态资源到动态内容

1、从HTML到PHP demo.php:后缀由html直接改为php,实际上当前页面已经变成了动态的php应用程序脚本 demo.php: 允许通过<?php ... ?>标签,添加php代码到当前脚本中 php标签内部代码由php.exe解释, php标签之外的代码原样输出,仍由web服务器解析 <!DOCTYPE html>…

zabbix案例--zabbix监控Tomcat

目录 一、 部署tomcat 二、配置zabbix-java-gateway 三、配置zabbix-server 四、配置zabbix-web界面 一、 部署tomcat tar xf apache-tomcat-8.5.16.tar.gz -C /usr/local/ ln -sv /usr/local/apache-tomcat-8.5.16/ /usr/local/tomcat cd /usr/local/tomcat/bin开启JMX…

KCC@广州开源读书会广州开源建设讨论会

亲爱的开源读书会朋友们&#xff0c; 在下个周末我们将举办一场令人激动的线下读书会&#xff0c;探讨两本引人入胜的新书《只是为了好玩》和《开源之迷》。作为一个致力于推广开源精神和技术创新的社区&#xff0c;这次我们还邀请了圈内大咖前来参与&#xff0c;会给大家提供一…

手机出现 不读卡 / 无信号时应该怎么办?

当手机屏幕亮起&#xff0c;一般在屏幕最上方都会有代表手机卡状态的显示&#xff0c;其中网络信号和读卡状态的标识&#xff0c;依旧有很多人分不太清&#xff0c;更不清楚改怎么办了。 1、当我们的手机里有两张卡时&#xff0c;则会有两个信号显示 2、信号状态一般是由短到…

Markdown语法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Markdown语法目录 前言1.标题2.文本样式3.列表四.图片5.链接6.目录7.代码片7.表格8.注脚9.注释10.自定义列表11.LaTeX数学公式12.插入甘特图13.插入UML图14.插入Merimaid流程…

做海外游戏推广有哪些条件?

做海外游戏推广需要充分准备和一系列条件的支持。以下是一些关键条件&#xff1a; 市场调研和策略制定&#xff1a;了解目标市场的文化、玩家偏好、竞争格局等是必要的。根据调研结果制定适合的推广策略。 本地化&#xff1a;将游戏内容、界面、语言、货币等进行本地化&#…

Mendix 基础审计模块介绍

一、前言 作为售前顾问&#xff0c;帮助客户选型低代码产品是日常工作。考察一家低代码产品的好坏&#xff0c;其中一个维度就是产品的成熟度。产品成熟度直接影响产品在使用中的稳定性和用户体验&#xff0c;对于新工具导入和可持续运用至关重要。 那怎么考察一个产品是否成…

input输入框自动填充后消除背景色

一般自动填充后会有一个突出的浅蓝色背景&#xff0c;一定也不好看&#xff0c;所以想把它去掉&#xff1a; 这个时候&#xff0c;就要用到浏览器的样式设置了&#xff1a; input:-webkit-autofill {background: transparent;transition: background-color 50000s ease-in-ou…

matlab使用教程(12)—随机数种子和随机数流

1.生成可重复的随机数 1.1指定种子 本示例显示如何通过首先指定种子来重复生成随机数数组。每次使用相同种子初始化生成器时&#xff0c;始终都可以获得相同的结果。首先&#xff0c;初始化随机数生成器&#xff0c;以使本示例中的结果具备可重复性。 rng( default ); 现在…

护眼灯值不值得买?什么护眼灯对眼睛好

想要选好护眼台灯首先我们要知道什么是护眼台灯&#xff0c;大的方向来看&#xff0c;护眼台灯就是可以保护视力的台灯&#xff0c;深入些讲就是具备让灯发出接近自然光特性的光线&#xff0c;同时光线不会伤害人眼而出现造成眼部不适甚至是视力降低的照明设备。 从细节上看就…

迁移协调器 - 就地迁移模式

在本系列博客的第一部分中&#xff0c;我们从高层级视角介绍了 Migration Coordinator 提供的所有模式&#xff0c;Migration Coordinator 是内置于 NSX 中的完全受 GSS 支持的工具&#xff0c;可将 NSX for vSphere 迁移到 NSX (NSX-T)。 本系列的第二篇博客将详细介绍就地迁…

问题记录和细节补充(完善中)

【问题记录】ORA-01400: 无法将 NULL 插入 Ajax 调用为Execute Server-Side Code返回了服务器错误ORA-01400: 无法将 NULL 插入 ("YWJA"."DEPT_TEST_WXX2"."DEPT_ID")。 原因&#xff1a;主键非自增&#xff0c;输入时并未有主键值传递&#x…

使用phpstorm开发调试thinkphp

1.环境准备 1.开发工具下载&#xff1a;PhpStorm: PHP IDE and Code Editor from JetBrains 2.PHP下载&#xff1a;PHP: Downloads 3. PHP扩展&#xff1a;PECL :: Package search 4.用与调试的xdebug模块&#xff1a; Xdebug: Downloads xdebug模块&#xff0c;如果是php8以…

目标和——力扣494

文章目录 题目描述解法:动态规划题目描述 解法:动态规划 nt findTargetSumWays(vector<int>& nums, int target){int sum

成集云 | 鼎捷ERP采购单同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 鼎捷ERP&#xff08;Enterprise Resource Planning&#xff09;是一款综合性的企业管理软件&#xff0c;它包括了多个模块来管理企业的各个方面&#xff0c;其中之一就是采购订单模块。鼎捷ERP的采购订单模块可以帮助企业有效管理和控制采购过程…

设计HTML5图像和多媒体

在网页中的文本信息直观、明了&#xff0c;而多媒体信息更富内涵和视觉冲击力。恰当使用不同类型的多媒体可以展示个性&#xff0c;突出重点&#xff0c;吸引用户。在HTML5之前&#xff0c;需要借助插件为网页添加多媒体&#xff0c;如Adobe Flash Player、苹果的QuickTime等。…

新一代分布式融合存储,数据场景All In One

1、摘要 2023年5月11日&#xff0c;浪潮信息全国巡展广州站正式启航。会上&#xff0c;重磅发布新一代分布式融合存储AS13000G7&#xff0c;其采用极致融合架构设计理念&#xff0c;实现同一套存储满足四种非结构化数据的“All In One”高效融合&#xff0c;数据存力提升300%&a…