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

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    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. ☀【SeaJS】SeaJS Grunt构建

    如何使用Grunt构建一个中型项目?https://github.com/twinstony/seajs-grunt-build spmjshttp://docs.spmjs.org/doc/inde ...

  2. Light OJ 1050 - Marbles（概率DP）

    题目大意: 一个包裹里有蓝色和红色的弹珠,在这个包裹里有奇数个弹珠,你先走, 你先从背包里随机的拿走一个弹珠,拿走每个弹珠的可能性是一样的.然后Jim从背包里拿走一个蓝色的弹珠,如果没有蓝色的弹珠让J ...

  3. （转载）php获取mysql版本的几种方法小结

    (转载)http://www.jb51.net/article/13930.htm 查询当前连接的MYSQL数据库的版本,可以用下面SQL语句来实现 select VERSION(); 当前$res= ...

  4. WIA Property Constant Definitions

    (@http://msdn.microsoft.com/en-us/library/windows/desktop/ms630202(v=vs.85).aspx): const DeviceID = ...

  5. Delphi webservice 定义 转

    webservice   Web Services是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务. 简介 它是一种构建应用程序的普遍 ...

  6. 排序Tip

    排序算法   所有排序算法汇总:http://en.wikipedia.org/wiki/Sort_algorithm counting sort 资料 :http://www.cs.miami.ed ...

  7. 用PHP写的一个简单的分页类 1.0版

    <?php /* 分页类 用于实现对多条数据分页显示 version:1.0 author:Knight E-Mail:S.Knight.Work@gmail.com Date:2013-10- ...

  8. 提高效率 常用的几个xcode快捷键

    能用好快捷键,不仅仅可以提高工作效率,而且让你看起来更加的自信和能干,下面几个常用的快捷键,希望对你在工作中有帮助 1.首先说明一下几个标示的意思 Command  ⌘ Control      ⌃ ...

  9. Mina学习之Codec Filter

    为何要使用Codec Filter 1. 任何一个网络应用程序接受到消息后,都需要知道消息的开头和结束. 2. 你可以把协议解析的部分放在IoHandler,但这样就会造成业务代码和协议解析代码混淆在 ...

  10. winform 猜猜看 分类： WinForm 2014-08-21 14:12 267人阅读 评论(0) 收藏

    说明: 1>窗体应用程序. 2>一个窗体(Form1),一个按钮(btnStart),一个文本(labTime) 3>截图: 4>代码如下: using System; usi ...