设置字符和单词间距介绍

属性名 单位 描述
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. SpringCloud的入门学习之概念理解、Zuul路由网关

    1.Zuul路由网关是什么? 答:Zuul包含了对请求的路由和过滤两个最主要的功能,其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础而过滤器功能则负责对请求的处理过程进 ...

  2. Android Service 启动流程

    执行顺序 : startService -> bindService -> unbindService -> stopService 回调的结果为: 执行顺序 : startServ ...

  3. ABP入门教程13 - 更新菜单

    点这里进入ABP入门教程目录 菜单更新 在展示层(即JD.CRS.Web.Mvc)的Startup下打开CRSNavigationProvider.cs //用以存放菜单相关信息 修改如下 using ...

  4. 优化SQL集一

    -->寻找低效的SQL语句 ,下面的语句主要适用于从视图v$sqlarea中获得当前运行下且耗用buffer_gets较多的SQL语句                   SELECT exec ...

  5. [Go] go中的goto语句跳到指定标签

    比如下面的语句goto TOP ,其中TOP就是自己的自定义的标签,下面的TOP:就是要执行的代码段一般用在需要两层循环的地方,里面goto再跳回上面去 ; i < ; i++ { { goto ...

  6. HTML5应用 转 Android、Windows Phone 应用

    一.HTML5 转 Android 目标SDK:API 20 1.新建一个 Blank Activity 的应用 2.在 AndroidManifest.xml 文件中添加联网权限 <uses- ...

  7. CodeForces - 1243D （思维+并查集）

    题意 https://vjudge.net/problem/CodeForces-1243D 有一张完全图,n个节点 有m条边的边权为1,其余的都为0 这m条边会给你 问你这张图的最小生成树的权值 思 ...

  8. go语言设计模式之bridge

    著名的桥接模式罗.. bridge.go package bridge import ( "errors" "fmt" "io" ) typ ...

  9. R-2 - 正态分布-中心极限-置信区间-正态假设检验

    本节内容 1:样本估计总体均值跟标准差,以及标准误 2:中心极限定理 3:如何查看数据是否是正态分布QQ图 4:置信区间的理解跟案例 5:假设检验 参考文章: 假设检验的学习和理解 一.样本估计总体均 ...

  10. BoW算法及DBoW2库简介（二）

    一.BoW算法 用OpenCV实现了最简单的BoW算法进行了一次小规模的图像检索任务,使用UKbench数据库,算法原理和网上的描述差不多,使用K-means算法进行聚类,这里使用KDTree算法进行 ...