设置字符和单词间距介绍

属性名 单位 描述
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. C# 英语纠错 LanguageTool

    WPF中,对单词拼写错误,textbox有相应的附加属性可以设置. <TextBox SpellCheck.IsEnabled="True" /> 但是此属性只在WPF ...

  2. SSM整合1（springMVC+mybatis）

    整合目标:控制层采用springmvc.持久层使用mybatis实现 整合思路: Dao层: 1.SqlMapConfig.xml,空文件即可,但是需要文件头. 2.applicationContex ...

  3. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  4. 用IIS进行部署，发布网页，运行DEMO

    因项目需要,正在学习如何部署IIS服务,并发布网站,发布以后,运行网页,具体步骤如下: 一.IIS的部署 在进行部署前,需要将一些必要的配置选好,如图: 打开选项,进行设置,将箭头部分进行勾选 在wi ...

  5. 【React Native】react-native之集成支付宝支付、微信支付

    一.在使用支付宝支付.微信支付之前导入桥接好的头文件 github地址:https://github.com/xujianfu/react-native-pay 二.集成支付宝支付流程 RN支付宝需要 ...

  6. dedecmsV5.7 arclist标签同时取出主表和附表里的数据

    {dede:arclist}{/dede:arclist}标签默认取出来的是主表x_archives中的数据,如果要取出附表中的数据,需要满足两个条件: 指定channelid属性(注意:channe ...

  7. mysql数据库相关流程图/原理图

    mysql数据库相关流程图/原理图 1.mysql主从复制原理图 mysql主从复制原理是大厂后端的高频面试题,了解mysql主从复制原理非常有必要. 主从复制原理,简言之,就三步曲,如下: 主数据库 ...

  8. C# JsonConvert 序列号 DateTime类型 格式多T

    序列化字符串后,值变成了"2018-02-05T00:00:00" 序列化时候 需要更改一下日期转换方式: IsoDateTimeConverter timeConverter = ...

  9. matlab练习程序（螺线拟合）

    这里待拟合的螺线我们选择阿基米德螺线,对数螺线类似. 螺线的笛卡尔坐标系方程为:   螺线从笛卡尔坐标转为极坐标方程为:   阿基米德螺线在极坐标系下极径r和极角theta为线性关系,方程为:   计 ...

  10. Spring Cloud Zuul 那些你不知道的功能点

    本文摘自于 <Spring Cloud微服务 入门 实战与进阶> 一书. 1. /routes 端点 当@EnableZuulProxy与Spring Boot Actuator配合使用时 ...