中文字间隔、字母间隔设置：

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现，如下面代码：

h1{

    letter-spacing:50px;

}

...

<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：

如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{

    word-spacing:50px;

}

...

<h1>welcome to here!</h1>

示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>字间距</title>

<style type="text/css">

    h1{letter-spacing:20px;font-size:20px;}

    p{word-spacing:20px;}

    #pp{letter-spacing:20px;

</style>

</head>

<body>

    <h1>hello world, hello rinpe !</h1>

    <hr/>

    <p>hello world, hello rinpe !</p>

    <hr/>

    <p id="pp">我的名字叫xxxxx</p>

</body>

</html>

效果:

段落排版--中文字间距、字母间距(letter-spacing, word-spacing)的更多相关文章

  1. Web前端开发基础 第四课（CSS文字和段落排版）

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  2. iOS UIButton文字和图片间距随意调整

    代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...

  3. word里输入英文字母间距变宽，字体改变，怎么回事？

    word里输入英文字母间距变宽,字体改变,怎么回事? 你有没有遇到下面这种情况,在word里输入英文,变的很奇怪,就像下面图中那样: 是不是很蛋疼?看起来很别扭. 那是因为输入法是全角状态 我们只要把 ...

  4. 字母间距letter-spacing

    效果图: 字母间距CSS: h1 {letter-spacing:2px} h2 {letter-spacing:-3px}

  5. Bootstrap_排版_文字样式

    一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.428 ...

  6. [Swift]LeetCode345. 反转字符串中的元音字母 | Reverse Vowels of a String

    Write a function that takes a string as input and reverse only the vowels of a string. Example 1: In ...

  7. leetCode题解之反转字符串中的元音字母

    1.问题描述 Reverse Vowels of a String Write a function that takes a string as input and reverse only the ...

  8. C#LeetCode刷题之#345-反转字符串中的元音字母​​​​​​​（Reverse Vowels of a String）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3935 访问. 编写一个函数,以字符串作为输入,反转该字符串中的元 ...

  9. 转载: 黄聪：C#中 Excel列字母与数字的转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

随机推荐

  1. tomcat 系统架构与设计模式 第二部分 设计模式 转

    Tomcat 系统架构与设计模式,第 2 部分: 设计模式分析 许 令波, Java 开发工程师, 淘宝网 许令波,现就职于淘宝网,是一名 Java 开发工程师.对大型互联网架构设计颇感兴趣,并对一些 ...

  2. centos 6.5安装esx sdk

    1. RHEL 6.3 64 bit yum install e2fsprogs-devel libuuid-devel yum install glibc.i686 yum install perl ...

  3. js对ajax返回数组的处理

    引言: ajax异步传输,可以传输字符串,但是数组这样的数据,就不太好传递了,这个时候怎么办呢? 答案是可以通过json来处理,后台将数据数据进行json编码! 然后客户端,通过js来进行解析. 这样 ...

  4. Robotium solo.goBack();不起作用，解决方案

    今天碰到用solo.goBack();点击手机的返回按键五次有四次起总用.查了半天后发现以下一种替代方法: solo.sendKey(KeyEvent.KEYCODE_BACK); robotium下 ...

  5. 【转】Eclipse中设置ButterKnife进行注解式开发步骤 -- 不错

    原文网址:http://www.bubuko.com/infodetail-974262.html 最近在进行Android注解式开发的学习,正在尝试用ButterKnife.ButterKnife的 ...

  6. SRM 441(1-250pt, 1-500pt)

    DIV1 250pt 题意:用数组A表示置换,由该置换得到数组B(B[0] = 0, B[i] = A[B[i-1]]).给定A,求一个A',使得由A'得到的B为单循环置换且A'与A的差距最小.定义A ...

  7. hdoj 3342 Legal or Not【拓扑排序】

    Legal or Not Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  8. Android开发工具GenyMotion安装和使用方法

          好长时间没有再接触Android了,以至于GenyMotion出现这么久了,我还没有试用过,记得当时发布Android Studio时,当天我就开始试用了,好吧,看到GenyMotion这 ...

  9. C#与C++函数调用

    在 上篇文章重点讲解数据类型的转换,在此基础上再讲解函数调用. 1.函数调用 c++中函数 INF_NET_API INF_RESULT WINAPI INF_NET_GetList(long lLo ...

  10. c++ timer基于win消息队列

    能够承载10w个timer通信执行,说关闭就关闭,里面用了一个比較巧妙的线程处理,呵呵10W个timer就10多个线程,请大牛不要笑话,供新手学习之用 #pragma once #include &l ...