css 字体间距 设置

news2024/11/14 10:25:19

一、css word-spacing属性设置字间距(单词的间距)

word-spacing 属性增加或减少单词间的空白(即字间隔);在这个属性中,“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的,如果多个字母被连在一起,则会被word-spacing视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。

语法:word-spacing:值;

normal:定义单词间的标准空间,默认值。
length:定义单词间的固定空间(长度值)。
inherit:规定应该从父元素继承 word-spacing 属性的值。
说明:

如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css word-spacing属性设置字间距</title>
<style>
.demo{
width:500px;
height: 500px;
margin: 50px auto;
}
p{
word-spacing:20px;
}
</style>
</head>
<body>
<div class=demo">
<p>abcd你好a!</p>
<p>ab cd 你好a! </p></div>
</body>
</htm1>

两个p标签里的内容是一样的,区别就在于第一个p标签里的每个字符都用空格隔开了,第二个p标签里不是每个都用空格隔开的,我们来看看设置间距 距离为20px后的效果图:

 

二、css letter-spacing属性设置字间距

letter-spacing 属性增加或减少字符间的空白(字符间距),该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

对于这个属性来说:每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”!。

属性:该属性所支持的属性值与word-spacing属性相似,可以参考word-spacing属性。
 

效果图:

如上:与word-spacing 属性相比,letter-spacing属性无论有没有把每个字符字母等用空格隔开都设置了其文字与左右文字的间距,甚至连空格字符与其他字符之间也设置了间距。 

三、word-spacing属性与letter-spacing属性的简单比较


word-spacing属性


1、检索或设置对象中的单词之间插入的空格数,允许为负值。 该属性适用英文使用。
2、对于英文,如果多个字母被连在一起,则会被word-spacing视为一个单词;对汉字,如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。

letter-spacing属性


1、设置对象中的文字之间的间隔.每一个中文文字以及英文字母之间,都被隔开了所设置的距离,此属性是控制字间距的。该属性是中英文都适用 ;
2、只对文字起作用 对于图片失效的;
3、对汉字是以一个字进行间隔的, 对于英文是以一个字母进行间隔的。 

  


以上内容转载:CSS 设置文字间距_css字间距_CamilleZJ的博客-CSDN博客


延伸阅读

css:字体超出长度显示省略号_橙-极纪元的博客-CSDN博客

html首行缩进,行高,每行文字对齐,两端文字对齐,修剪文本解决方案_橙-极纪元的博客-CSDN博客

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

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

相关文章

【一】PCIe基础知识

一、PCIe概述 1、PCIe速度 PCI采用总线共享式通讯方式&#xff1b;PCIe采用点到点(Endpoint to Endpoint)通讯方式&#xff0c;互为接收端和发送端&#xff0c;全双工&#xff0c;基于数据包传输&#xff1b;两个PCIe设备之间的连接称作一条链路(link)&#xff0c; 一条链路可…

Nginx报跨域问题怎么解决

这就是报错信息&#xff0c;可以看出这里是一个请求发送了两次&#xff0c;这是什么原因呢&#xff1f; 这种请求是因为它是applocayion/json格式的请求&#xff0c;在请求一个资源的时候&#xff0c;先会发送一个预检请求&#xff0c;然后才会发送真正的请求&#xff0c;那为…

桥接模式:如何实现支持不同类型和渠道的消息推送系统?

上一节课我们学习了第一种结构型模式&#xff1a;代理模式。它在不改变原始类&#xff08;或者叫被代理类&#xff09;代码的情况下&#xff0c;通过引入代理类来给原始类附加功能。代理模式在平时的开发经常被用到&#xff0c;常用在业务系统中开发一些非功能性需求&#xff0…

Web前端 Day 2

元素显示模式 块元素 独占一行 宽、高、内外边距可以设置 eg. div 行内元素 一行可以存在多个 eg. span 行内块元素 一行可以存在多个 宽、高、内外边距可以设置 是否独占一行 表格标签 <table> <caption></caption> 表格标题&#xff08;概括&#…

手把手的教你安装PyCharm --Pycharm安装详细教程(一)(非常详细,非常实用)

简介 Jetbrains家族和Pycharm版本划分&#xff1a; pycharm是Jetbrains家族中的一个明星产品&#xff0c;Jetbrains开发了许多好用的编辑器&#xff0c;包括Java编辑器&#xff08;IntelliJ IDEA&#xff09;、JavaScript编辑器&#xff08;WebStorm&#xff09;、PHP编辑器&…

面向对象编程主线一

面向对象编程 一、Java面向对象学习的三条主线 Java类及类的成员&#xff1a;属性、方法、构造器&#xff1b;代码块、内部类面向对象的三大特征&#xff1a;封装性、继承性、多态性、&#xff08;抽象性&#xff09;其他关键字&#xff1a;this、super、static、final、abst…

分治法求最近点对问题

目录 蛮力法 分治法 探究分治规模小于一定程度时采用暴力解法 蛮力法 算法思想 蛮力法&#xff0c;顾名思义&#xff0c;即穷举所有点与点之间的距离&#xff0c;两层循环暴力找出最近点对。算法执行可视化如图1所示&#xff0c;word文档GIF静态显示&#xff0c;附件已含动…

BTY Carnival - Task2 | Get the OG Role Win USDT

欢迎来到比特元社区&#xff01; 比特元是一条兼具平行链与零知识证明技术的EVM兼容区块链。BitYuan的生态系统dns.bityuan.com即将开放公测。用户完成任务即获得白名单资格&#xff0c;可进入到DC群的DNS白名单频道 &#xff0c;我们将定期开展抽BTY等活动&#xff0c;并且将…

2022年第十三届JAVA B组国赛

文章目录 A.重合次数&#xff08;模拟&#xff09;B.数数&#xff08;数学&#xff09; A.重合次数&#xff08;模拟&#xff09; Answer:494 这个题目比较坑人&#xff0c; public class Main {static BufferedReader br new BufferedReader(new InputStreamReader(System.…

多元回归预测 | Matlab阿基米德算法(AOA)优化极限梯度提升树XGBoost回归预测,AOA-XGBoost回归预测模型,多变输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 阿基米德算法(AOA)优化极限梯度提升树XGBoost回归预测,AOA-XGBoost回归预测模型,多变输入模型,多变量输入模型,多变量输入模型,matlab代码回归预测,多变量输入模型,多变量输入模型 评价指标包括:MAE、RMSE和R2…

一文3000字从0到1带你进行Mock测试(建议收藏)

​什么是mock&#xff1f; ​mock测试是以可控的方式模拟真实的对象行为。程序员通常创造模拟对象来测试对象本身该具备的行为&#xff0c;很类似汽车设计者使用碰撞测试假人来模拟车辆碰撞中人的动态行为 为什么要使用Mock&#xff1f; 之所以使用mock测试&#xff0c;是因…

pdf怎么转换成jpg图片?分享几个实用的方法!

记灵在线工具是一种非常方便的工具&#xff0c;可以帮助我们将PDF文件转换为图片格式。下面介绍三种不同的方法&#xff0c;让我们来了解一下。 方法一&#xff1a;记灵在线工具 1、打开记灵在线工具&#xff0c;在工具列表中选择“PDF转图片”。 2、将需要转换的PDF文件添加…

[C语言][小游戏][猜数游戏]

C语言的奇妙旅行 目录&#xff1a;一、猜数判定二、重复到猜对为止三、随机设定目标数字四、限制输入次数五、保存输入的记录六、测试小游戏 目录&#xff1a; 带着梦想&#xff0c;带着好奇&#xff0c;带着执着&#xff0c;在C语言的世界里旅行。亲爱的朋友们&#xff0c;一…

能源结构变更图,传统能源结构对比新兴能源

以传统的能源&#xff08;煤、天然气&#xff09;提供能源&#xff0c;到新兴能源 目前新兴能源以 太阳能&#xff0c;风能为主以及其它行业&#xff0c; 一类企业以新兴能源这种为主&#xff0c;核心是能源接收&#xff0c;以及储存能源&#xff0c;存储通常两种方式&#x…

cmake列表

目录 cmake多行注释 求list长度 demo 获取list的值 demo 插入list demo 追加list demo 查找列表中的字符 demo 删除list list向前删除和向后删除数据 demo 字符串反转 demo 特殊操作 Readinglist(LENGTH <list> <out-var>)list(GET <list> &…

STM32CubeMX开发实战1-LED点灯

目录 点灯选择 MCU引脚设置时钟设置项目配置生成项目项目文件介绍Debugger 设置 点灯 这里将会以一个最简单的一个点灯实验来展示如何使用 STM32CubeMX 快速生成 STM32 工程并上手开发&#xff0c;包括对项目工程建立的详细内容分析解释 接下来使用正点原子探索者开发板 STM32F…

101、基于STM32单片机智能输液器红外点滴液位监控报警系统设计(程序+原理图+PCB源文件+参考论文+硬件设计资料+元器件清单等)

单片机主芯片选择方案 方案一&#xff1a;AT89C51是美国ATMEL公司生产的低电压&#xff0c;高性能CMOS型8位单片机&#xff0c;器件采用ATMEL公司的高密度、非易失性存储技术生产&#xff0c;兼容标准MCS-51指令系统&#xff0c;片内置通用8位中央处理器(CPU)和Flash存储单元&a…

Python程序设计

很多刚接触Python的同学会觉得Python就和shell语言一样&#xff0c;是一门脚本语言&#xff0c;并不需要设计&#xff0c;只需要关注要实现的功能。确实一门计算机语言的诞生就是为了去更好的解决当前的痛点&#xff0c;功能实现肯定是第一位的。但是如何在功能实现的前提下&am…

【人工智能】您必须了解的最佳聊天机器人框架

在本博客中&#xff0c;我们将讨论 7 大聊天机器人开发框架。 聊天机器人现在已成为许多企业不可或缺的一部分。他们利用聊天机器人提供客户支持服务。聊天机器人增强了人工代理以提供客户服务支持。企业每天都会收到大量查询。手动回答这些问题不仅耗时&#xff0c;而且还会增…

数据结构--由遍历序列构造二叉树

数据结构–由遍历序列构造二叉树 不同二叉树的中序遍历序列 中序遍历:中序遍历 左 \color{red}左 左子树、 根 \color{purple}根 根结点、中序遍历 右 \color{green}右 右子树 中序遍历序列:BDCAE 结论 : 一个中序遍历序列可能对应多种二叉树形态 \color{green}结论:一个中序…