设置字符和单词间距介绍

属性名 单位 描述
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. 基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目

    一.前言 最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们 功能很简单,单点登录,前后端动态权限配 ...

  2. Linux介绍以及VMware和Centos的安装

    一. Linux介绍 1 Linux诞生的故事 Unix篇: 为了进一步强化大型主机的功能,让主机的资源可以提供更多的使用者来利用,所以在1964年, 由AT&A公司的贝尔实验室(Bell). ...

  3. 松软科技web课堂:JavaScript 注释

    JavaScript 注释用于解释 JavaScript 代码,增强其可读性. JavaScript 注释也可以用于在测试替代代码时阻止执行. 单行注释 单行注释以 // 开头. 任何位于 // 与行 ...

  4. JQuery jquerysessionjs插件使用介绍

    jquerysessionjs插件使用介绍 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j 下载地址: https://gitee.com/ishou ...

  5. 来个ADG switch over

    怕以后忘了,做个试验记录一下,这个switch比较常规1]主--备库先查一遍,如下的话就可以开始了两者当前序列一致角色状态如下--主库SQL> archive log list;数据库日志模式 ...

  6. Mysql—下载安装与使用

    一.安装前准备 检查是否已经安装过mysql,执行命令,显示结果为:bt-mysql57-5.7.26-1.el7.x86_64 [root@localhost ~]# rpm -qa | grep ...

  7. 使用python对整个网页进行截图

    方法一.使用PyQt4的QtWebKit组件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...

  8. last.jenkins 其他 一些知识点

    时区不一致. jenkins的的时间和 系统时间不一致. 打开jenkins的[系统管理]---> [脚本命令行],在命令框中输入一下命令[时间时区设为 亚洲上海] System.setProp ...

  9. 201777010217-金云馨《面向对象程序设计(Java)》第二周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  10. mybatis foreach方法遍历对象

    <delete id="deleteAppUserByIds">    delete from app_userinfo where     <foreach i ...