设置字符和单词间距介绍

属性名 单位 描述
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. SpringBoot2.0 基础案例(17)：自定义启动页,项目打包和指定运行环境

    本文源码 GitHub地址:知了一笑 https://github.com/cicadasmile/spring-boot-base 一.打包简介 springboot的打包方式有很多种.可以打war ...

  2. Java 中 PO 与 VO 的区别

    什么是PO PO(Persistence Object 持久化对象)是直接跟持久层数据库打交道的java Bean (model,entity,bean等叫法都是可以的),里面除了私有的成员变量之外, ...

  3. Web前端基础(16):jQuery基础(三)

    1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...

  4. 面试再问ThreadLocal，别说你不会

    转载自:公众号<Java知音> ThreadLocal是什么 以前面试的时候问到ThreadLocal总是一脸懵逼,只知道有这个哥们,不了解他是用来做什么的,更不清楚他的原理了.表面上看他 ...

  5. ZooKeeper 面试题

    高强度训练第二十一天总结 1. ZooKeeper 面试题 ZooKeeper 是一个开放源码的分布式协调服务,它是集群的管理者,监视着集群 中各个节点的状态根据节点提交的反馈进行下一步合理操作.最终 ...

  6. Python3爬取豆瓣网电影信息

      # -*- coding:utf-8 -*- """ 一个简单的Python爬虫, 用于抓取豆瓣电影Top前250的电影的名称 Language: Python3.6 ...

  7. cell右侧的状态（accessoryType）

    Cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; Cell.accessoryType = UITableViewCe ...

  8. Linux Shell之监测磁盘空间

    Linux Shell之监测磁盘空间 系统管理员的另一个重要任务就是监测系统磁盘的使用情况.不管运行的是简单Linux台式机还是大型的Linux服务器,我们都要知道还有多少空间可以留给应用程序.事实上 ...

  9. ERROR: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/Library/Python/2.7/site-packages/itsdangerous' Consider using the `--user` option or check the permissions

    近期练习flask写个blog, 安装flask扩展时 pip install Flask-WTF 报ERROR: Could not install packages due to an Envir ...

  10. RPM命令总结

    RPM软件管理程序 rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他 ...