CSS布局基础(文字[行内<块>]与行内[块]垂直对齐方式 文字溢出显示省略号)
文字[行内<块>]与行内[块]垂直对齐方式
- 文字[行内<块>]与行内[块]垂直对齐方式
- 概述
- 图片底部空隙问题
- 文字溢出显示省略号
- 单行文字
- 多行文字
文字[行内<块>]与行内[块]垂直对齐方式
概述
vertical-align: top | middle| bottom | baseline(默认) | sub | super
top : 文字[行内<块>]顶部对齐图片顶部
bottom :文字[行内<块>]底部对齐图片底部
middle:文字[行内<块>]中线对齐图片中线
baseline:文字[行内<块>]**基线(拼音线的中间那一条)**对齐图片底部
sub:文字[行内<块>]下表对齐图片底部
super:文字[行内<块>]上标对齐图片顶部
如果没有这个属性,需要手动将文字[行内<块>]垂直居中,与行内块对齐
图片底部空隙问题
图片底部默认会有一个空白的缝隙,这是由于图片默认对齐基线导致的
- 我们可以手动设置图片对齐方式即可,只要不是基线对齐都可以消除空白
- 或者将图片转为 块级元素,因为块级元素是没有基线对齐这个特点的,也可以消除空白缝隙
文字溢出显示省略号
单行文字
- 盒子设置宽度,不指定宽度时,默认最大宽度为父盒子宽度
- 盒子设置不换行
- 盒子上设置 溢出隐藏
- 盒子上设置 文字溢出显示省略号
div {width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
多行文字
注意:多行文本的换行机制,由于英文的分词机制,如果没有空格 隔开,意味着这是一个单词,因此不会换行,而中文和其他不同语义的语言不存在此问题, 也就是说,换行不会拆开一个单词
以下CSS属性控制此行为
word-wrap: normal(默认,在断词符处换行)|break-word(忽视单词完整性,以单个字母为界限换行);
而我们在实际使用中,实际的单词不会一直没有空格,因此通常情况下不会使用 word-warp 以及 word-break 等等属性
多行文字溢出显示省略号,虽然 -webkit-* 不是css标准属性,但实际测试下来,主流PC端浏览器能支持
overflow: 溢出盒子隐藏
text-overflow: ellipsis; 文字溢出显示省略号(实际测试下来这个不是必须的)
display: -webkit-box; 盒子以-webkit-box 显示
-webkit-line-clamp: 3; 第几行显示省略号,注意当盒子指定高度时,省略号只出现在第几行,不影响后面内容,因此,建议这种盒子要么不设置高度,由此属性决定内容总行数进而确定盒子高度;要么根据实际情况,计算合适的高度。
-webkit-box-orient: vertical; 设置内容排列方式
.over2_2{width: 100px;background-color: #9a6e3a;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}
相关文章:
CSS布局基础(文字[行内<块>]与行内[块]垂直对齐方式 文字溢出显示省略号)
文字[行内<块>]与行内[块]垂直对齐方式 文字[行内<块>]与行内[块]垂直对齐方式概述图片底部空隙问题 文字溢出显示省略号单行文字多行文字 文字[行内<块>]与行内[块]垂直对齐方式 概述 vertical-align: top | middle| bottom | baseline(默认) | sub | sup…...
AI自动写文章_免费在线原创文章生成器
自动写文章生成器 自动写文章生成器是一种利用人工智能和自然语言处理技术,帮助用户快速生成文章的工具。该软件可以根据用户的需求和选择,自动生成符合要求的文章,无需手动编写和修改。 自动写文章生成器的主要功能包括以下几个方面&#…...
Java阶段二Day15
Java阶段二Day15 文章目录 Java阶段二Day15复习前日知识点对象数据类型注入数组类型注入集合类型的注入p命名空间引入外部属性文件 基于XML管理beanbean的作用域bean的生命周期代码演示生命周期后置处理器处理展示基于XML的自动装配 基于注解管理bean开启组件扫描使用注解定义B…...
从月薪3000到月薪20000,自动化测试应该这样学...
绝大多数测试工程师都是从功能测试做起的,工作忙忙碌碌,每天在各种业务需求学习和点点中度过,过了好多年发现自己还只是一个功能测试工程师。 随着移动互联网的发展,从业人员能力的整体进步,软件测试需要具备的能力要…...
Python魔法方法 单例模式
前言 本文介绍一下python中常用的魔法方法以及面向对象中非常重要的单例模式。 魔法方法 python中一切皆对象,因为python是面向对象的编程语言。python给类和对象提供了大量的内置方法,这些内置方法也称魔法方法。这些魔法方法总是在某种条件下自动触…...
计算机网络基础知识(三)—— 什么是OSI七层模型?
文章目录 00 | 🛸发展史🛸01 | 🛸OSI七层参考模型🛸02 | 🛸OSI七层参考模型的信息流向🛸 OSI七层模型是Open Systems Interconnection Reference Model的缩写,是由国际标准化组织(IS…...
Python(符号计算常微分方程)谐振子牛顿运动方程
牛顿运动方程 牛顿运动方程可以写成以下形式 F d p d t m d v d t m d 2 r d t 2 \mathbf{F}\frac{d \mathbf{p}}{d t}m \frac{d \mathbf{v}}{d t}m \frac{d^2 \mathbf{r}}{d t^2} Fdtdpmdtdvmdt2d2r 恒力问题 具有恒定力的问题意味着恒定的加速度。 典型的例子是…...
OpenCL编程指南-1.2OpenCL基本概念
OpenCL概念基础 面向异构平台的应用都必须完成以下步骤: 1)发现构成异构系统的组件。 2)探查这些组件的特征,使软件能够适应不同硬件单元的特定特性。 3)创建将在平台上运行的指令块(内核)。 4)…...
使用 ChatGPT 辅助学习——为自己找一个老师
我们每个人都有许多标签,例如高中生、成绩中等、文科,根据这些标签我和其他拥有相同标签的人分配了相同的教程、班级和老师,这可以带来效率上的提升,因为同一份教程、老师就可以服务几十上百人,而无须为每个人定制&…...
MySQL基础(二十一)用户与权限管理
1. 用户管理 1.1 登录MySQL服务器 启动MySQL服务后,可以通过mysql命令来登录MySQL服务器,命令如下: mysql –h hostname|hostIP –P port –u username –p DatabaseName –e "SQL语句"-h参数后面接主机名或者主机IP,…...
程序员的下一个风口
面对近一年的裁员潮,以及 GPT 出现带来的 AI 颠覆潮流,各种话题出现:「前端已死」、「后端已死」、「Copy/Paste 程序员将被 AI 取代」。程序员行业是否还有发展空间? 这一两年的就业机会是因为经济衰落周期内造成的,不…...
Android 自定义View 之 简易输入框
简易输入框 前言正文① 构造方法② XML样式③ 测量④ 绘制1. 绘制方框2. 绘制文字 ⑤ 输入1. 键盘布局2. 键盘接口3. 键盘弹窗4. 显示键盘5. 相关API 四、使用自定义View五、源码 前言 在日常工作开发中,我们时长会遇到各种各样的需求,不部分需求是可以通…...
SpringMVC的基础知识
创建SpringMVC项目 SpringMVC项目其实和SpingBoot项目差不多,就多引入了一个SpringWeb项目而已拉 可以看这篇博客,创建的就是一个SpringMVC项目--创建项目の博客 SpringMVC是啥 Spring是啥相信大家都了解 啥是MVC呢?MVC是Model View Controller的缩写 我们分开看这三个词Model…...
OpenPCDet系列 | 4.2 DataAugmentor点云数据增强模块解析
文章目录 DataAugmentor模块解析1. gt_sampling2. random_world_flip3. random_world_rotation4. random_world_scaling5. limit_period DataAugmentor模块解析 在pointpillars算法中,具体的数据增强方法配置是在yaml中的DATA_CONFIG.DATA_AUGMENTOR进行配置&#…...
精准测试之过程与实践 | 京东云技术团队
作者:京东工业 宛煜昕 一、怎样的技术 •百度百科: 精准测试是一套计算机测试辅助分析系统。 精准测试的核心组件包含的软件测试示波器、用例和代码的双向追溯、智能回归测试用例选取、覆盖率分析、缺陷定位、测试用例聚类分析、测试用例自动生成系统…...
类ChatGPT逐行代码解读(1/2):从零实现Transformer、ChatGLM-6B
前言 最近一直在做类ChatGPT项目的部署 微调,关注比较多的是两个:一个LLaMA,一个ChatGLM,会发现有不少模型是基于这两个模型去做微调的,说到微调,那具体怎么微调呢,因此又详细了解了一下微调代…...
车道线检测
前言 目前,车道线检测技术已经相当成熟,主要应用在自动驾驶、智能交通等领域。下面列举一些当下最流行的车道线检测方法: 基于图像处理的车道线检测方法。该方法是通过图像处理技术从摄像头传回的图像中提取车道线信息的一种方法,…...
云渲染靠谱吗,使用云渲染会不会被盗作品?
云渲染靠谱吗、安全吗?如果使用 云渲染会不会被盗作品......Renderbus瑞云渲染作为一个正经的云渲染平台,也时不时会收到这类疑问,首先,瑞云渲染是肯定靠谱的,各位可以放心使用。另外小编也将在本篇教你如何辨别云渲染平台是否安全…...
什么是FPGA?关于FPGA基础知识 一起来了解FPGA lattice 深力科 MachXO3系列 LCMXO3LF-9400C-5BG256C
什么是FPGA?关于FPGA基础知识 一起来了解FPGA lattice 深力科 MachXO3系列 LCMXO3LF-9400C-5BG256C FPGA基础知识:FPGA是英文Field-Programmable Gate Array的缩写,即现场可编程门阵列,它是在PAL、GAL、CPLD等可编程器…...
有什么好用的云渲染?
在CG制作流程中,离线渲染一直是必要且耗时的环节。你的场景越复杂,渲染出现问题的可能性就越大,尤其是当你独自工作,没有人给你建议的时候,灯光、模型、场景任何一个环节渲染时出现问题都可能让你焦头烂额,…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
