设置字符和单词间距介绍

属性名 单位 描述
letter-spacing px 设置字符间距
word-spacing px 设置单词间距

letter-spacing设置字符间距

  • letter-spacing属性原理是：根据要设置的文本每一个字符之间的间距。
  • 让我们进入letter-spacing属性的实践，实践内容如：将HTML页面中的p标签中的文本每一个字符间距设置为50px。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置字符和单词距离</title>

    <style>

        p{

            letter-spacing: 50px;

        }

    </style>

</head>

<body>

    <p>成功不是打败别人，而是改变自己。</p>

</body>

</html>

  • 结果图

word-spacing设置单词间距

  • word-spacing属性原理是：根据要设置的文本，以空格为核心设置间距，主要用于在英文的网站中，笔者使用中文是为了让读者更好的理解word-spacing属性的原理。

  • 让我们进入letter-spacing属性的实践，实践内容如：将HTML页面中的p标签中的每一个以空格之间的间距设置为30px。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>设置字符和单词距离</title>

    <style>

        p{

            word-spacing: 30px;

        }

    </style>

</head>

<body>

    <p>成功 不是 打败 别人，而是改变自己。</p>

</body>

</html>

  • 结果图

如何给HTML页面的文本设置字符和单词间距的更多相关文章

  1. 如何设置HTML页面中文本的字体

    字体属性介绍 CSS中的字体属性是干什么的呢?字体字体肯定和字体有关咯,就是设置HTML页面中文本的字体, CSS中常用的字体属性有几种呢,笔者给大家梳理了下,比较常用的一共有5种,今天我们就看看这5 ...

  2. 页面的缓存设置与meta的作用详细解释

    网上转的,来自JSP的,但是原理大同小异哦,有时间 写个asp.net版的 HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务 ...

  3. Java工具类-设置字符编码

    package common; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.Filter ...

  4. JSP页面的编码设置（转载）

    1. pageEncoding:<%@ page pageEncoding="UTF-8"%> jsp页面编码: jsp文件本身的编码 2. contentType: ...

  5. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

  6. 如何给HTML标签中的文本设置修饰线

    text-decoration属性介绍 text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值. text-decoration属性值说明表 值 作用 ...

  7. CSS-基本语法/引用/文本设置/选择器/css3属性

    CSS-基本语法/引用/文本设置 css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设 ...

  8. 【代码笔记】iOS-获得富文本设置以后的文字高度

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  9. angularjs中的页面访问权限设置

    11月在赶一个项目,这阵子比较忙,挤挤时间更一篇博客吧,如标题所述说说在ng中页面访问权限控制的问题,水平有限各位看官见谅: 在以往的项目中,前后端常见的配合方式是前端提供页面和ui加一点DuangD ...

随机推荐

  1. cookie及其特点

    关于cookie我们首先要知道cookie是指会话跟踪技术 我们可以用它来做一下事情,但是我们需要清楚cookie是不安全的 功能: 会话状态管理(如用户登录状态.购物车.游戏分数和其它需要记录的信息 ...

  2. HDU 1081 To the Max 最大子矩阵（动态规划求最大连续子序列和）

    Description Given a two-dimensional array of positive and negative integers, a sub-rectangle is any ...

  3. CSS3动画的使用

    0921自我总结 CSS3动画的使用 一.动画的创建 @keyframes规则是创建动画 浏览器兼容 1.@keyframes myfirst 2.@-webkit-keyframes myfirst ...

  4. Java - IO System类支持和缓冲流

    System类的支持和缓冲流 System类对IO的支持 在System类中,为了支持IO操作提供了三个常量: 错误输出: public static final PrintStream err; 输 ...

  5. 一种简单的REST API接口加密实现，只允许自己的产品调用后台，防止接口被刷

    在项目上线后,后台接口很容易通过抓包工具看到, 难免被人为构造恶意请求攻击我们的系统,相信大家都或多或少都遇到过短信验证码被刷.疯狂留言灌水.数据被恶意爬取等问题,这种直接抓接口然后写个循环调用的行为 ...

  6. hadoop访问50070

    http://ip:50070 注意id必须是namenode节点才能访问,datanode不能访问

  7. Git操作删除 untracked files

    最近使用git 管理项目的时候,编译过程中出现了很多中间文件,今天发现使用 git clean 命令可以很方便进行清除: # 删除 untracked files git clean -f # 连 u ...

  8. Python—创建进程的三种方式

    方式一:os.fork() 子进程是从os.fork得到的值,然后赋值开始执行的.即子进程不执行os.fork,从得到的值开始执行. 父进程中fork之前的内容子进程同样会复制,但父子进程空间独立,f ...

  9. 移动网络游戏实现流程——并借此阐明pomelo在GitHub上各个项目间的关系

    <!DOCTYPE html> 摘要:本文通过一个简易流程图介绍如何基于Cocos2d-x引擎和pomelo服务器框架开发一个移动网络游戏.并借此阐明pomelo提供的各个项目间的关系. ...

  10. Druid-代码段-4-2

    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程4.1,连接池瘦身: //连接池瘦身 public void shrink(boolean checkTime, boole ...