css 字体间距 设置

一、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.hqwc.cn/news/18868.html

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

相关文章

ProtoBuf的学习并且制作了一个网络通讯录项目

Linux环境下载安装ProtoBuf编译器 1. 安装依赖库 Ubuntu用户选择 sudo apt-get install autoconf automake libtool curl make g unzip -yCentos用户选择 sudo yum install -y autoconf automake libtool curl make gcc-c unzip2. 下载ProtoBuf编译器 Github地址&#xff…

力扣 53. 最大子数组和

题目来源&#xff1a;https://leetcode.cn/problems/maximum-subarray/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a;难点在于判断什么时候更新count。 是当nums[i]为正数吗&#xff1f;那要nums没有正数怎么办&#xff1b; 是当nums[i]比之前子数组…

Github Pages

官方教程&#xff1a;https://pages.github.com/ 1 创建仓库 命名为 你的名字.github.io 克隆项目 git clone https://github.com/username/username.github.io加入index.html页面 在克隆的项目中&#xff0c;加入一个index.html html文件简单写几个dom <!DOCTYPE html…

java的静态代码块

java的静态代码块用static声明&#xff0c;在类被加载的时候调用。可以包含多个静态代码块&#xff0c;按照出现的顺序执行。静态代码块可以用来对类变量初始化。 代码示例&#xff1a; package com.thb;import java.nio.channels.spi.SelectorProvider;public class Test1 {…

Linux Vim提示:E325: ATTENTION 解决方案

提示&#xff1a; 这是由于我们异常退出vim界面 程序异常关闭导致的 解决&#xff1a; 在这种情况下&#xff0c;您可以根据以下选项来解决问题&#xff1a; [O]pen Read-Only&#xff1a;以只读模式打开文件。这意味着您不能编辑文件&#xff0c;但可以查看其内容。选择此选…

Java安全——基于密码的加密

Java安全 基于密码的加密 基于密码加密和SSL加密的区别 密码加密可以数据和密码分离传输SSL只限于在套接字空间传输的数据进行加密 SSL和密码加密 密码加密是指通过算法将原始信息转换成密文&#xff0c;只有知道相应密钥的人才能解密。Java中常用的密码加密算法包括MD5、SHA、…

走进Linux世界【二、VM与Linux安装】

第二章 VM与Linux安装 1、安装VMware ​ 这里安装Vm主要是为了安装Linux系统&#xff0c;除了相对云服务器&#xff0c;比较大众化的操作&#xff0c;当然更多的是熟悉Linux操作 1、Windows安装 ​ (1) 下载链接&#xff0c;目前版本上下载VM15的版本即可https://www.vmwar…

两个分数比较大小

解决问题&#xff1a; 对于分子和分母的数据范围过大 导致化成小数进行比较大小的时候 存在精度丢失&#xff0c;不能比较的情况 为此进行算式变形推出 故采用如下自定义函数&#xff1a; ll bj(ll fz1,ll fm1,ll fz2,ll fm2){//分母相等if(fm1 fm2){return fz1-fz2;}//分…

GPT(Generative Pre-Training)论文解读及实现(一)

1 GPT Framework 1.1 Unsupervised pre-training Given an unsupervised corpus of tokens U {u1, . . . , un}, we use a standard language modeling objective to maximize the following likelihood: 在给定语料上下文环境下&#xff0c;目标时最大化下面的语言模型&…

3d Max中的Arnold渲染为黑色,这样处理!

使用Arnold渲染视图(ARV)时&#xff0c;图像保持黑色。 快照功能和常规3ds Max渲染设置可按预期生成图像。 解决方案&#xff1a; 解决方案可能需要执行下面的一项或多项操作&#xff1a; 添加光源 检查场景文件是否包含光源。如果场景中没有光源&#xff0c;渲染结果为黑色…

vue中使用v-for实现两次嵌套循环,判断某子元素是否显示,进行复杂表单校验

一、需求场景&#xff1a; 有以下一个使用场景&#xff0c;名称111、名称222、名称333&#xff0c;是放在一个大数组里的&#xff0c;然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组&#xff0c;子数组再通过第二次for循环展示出来。当我们选择发放方式的…

Linux(驱动编程)(调试技术)(imx6ull)

调试技术 1、在写驱动程序时函数未包含头文件 在linux内核源码driver/char目录下输入命令 grep “XXXX” * -nrw查看次函数在那个.c里用过&#xff0c;然后在vscode界面下按altp搜索这个.c就可以参考这个.c的头文件。 2、编译完驱动跟应用后先 insmod xxx.ko //插入 cat /…