css渲染（二）文本

一、文本样式

首行缩进　　text-indent

　　首行缩进是将段落的第一行缩进，这是常用的文本格式化效果。一般地，中文写作时开头空两格。[注意]该属性可以为负值；应用于: 块级元素(包括block和inline-block)　

        <div><p style="text-indent: 2em">亚冠联赛是亚洲最高等级的俱乐部赛事</p><p>相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯</p></div>

字间隔 word-spacing

　　字间隔是指单词间距，用来设置文字或单词之间的间距。[注意]字间隔可为负值；单词之间的间距 = word-spacing 空格大小；必须加空格才生效

    <div><div style="width: 100px;">购买数量：</div><div style="width: 100px;word-spacing: 27px">运 费：</div></div>

字母间隔 letter-spacing

　　字母间隔是指字符间距，[注意]字母间隔可为负值

<div style="width: 200px;letter-spacing: 5px">购买数量：</div>

文本转换　text-transform

　　文本转换用于处理英文的大小写转换

　　值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

　　初始值: none

<div style="text-transform: uppercase">test one</div>

文本修饰　text-decoration

　　文本修饰用于为文本提供修饰线　　[注意]文本修饰线的颜色与文本颜色相同

　　值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

　　初始值: none

<div style="text-decoration: underline">test one</div>

空白符　　white-space

　　空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格

white-space

　　初始值: normal

normal: 合并空白符，允许自动换行
nowrap: 合并空白符，不允许自动换行
pre-line: 合并空白符(不包括换行符)，允许自动换行
pre: 不合并空白符，不允许自动换行
pre-wrap: 不合并空白符，允许自动换行(在pre基础上，保留自动换行)

    <div style="width: 200px;white-space: nowrap">They can stay 72-hourswithin the Shandong      province after they have entered China via the Qingdao International Airport.</div>

文本换行　word-wrap

　　浏览器自身带有文本自动换行的功能，文本容器的右侧可以实现自动换行

　　对于英文来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行

　　对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号以及其前一个文字作为一个整体进行换行。

word-wrap

　　word-wrap属性用来实现长单词或URL地址的自动换行

　　值: normal | break-word

　　初始值: normal

word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word-wrap:break-word(截断单词换行，长单词从下一行开始)

　　[注意]当white-space的值是nowrap或pre时，word-break和word-wrap属性都失效

    <div style="width: 50px; word-wrap: break-word">abcfffffffffffffffffffjkl</div>

不加的时候　　　　　　　　　　　　加了的时候

二、文本溢出　　text-overflow

    <div class="text">长英文fffffffffffffffffff</div>

        .text{width: 80px;background: red;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

不加的时候　　　　　　　　　　加了的时候

三、文本阴影　　text-shadow

　　类似于盒子阴影，文本阴影也有x轴偏移、y轴偏移、模糊半径和阴影颜色这四个值，但是并没有阴影尺寸和内部阴影这两个值

text-shadow

　　值: none | (h-shadow v-shadow blur color)

　　初始值: none

h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur:     模糊距离(该值不能为负值，可选)
color:    阴影颜色，默认和文本颜色一致(可选)

<div class="text">测试文字</div>

        .text{width: 100px;height: 100px;text-shadow: 2px 2px 3px green;}

css渲染（二）文本相关推荐

OpenGL学习笔记一之实战篇二文本渲染
转载自 https://learnopengl-cn.github.io/06%20In%20Practice/02%20Text%20Rendering/ 当你在图形计算领域冒险到了一定阶段以后你可 ...
CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...
渲染富文本编辑器并设置富文本编辑器的高度
目标:富文本编辑器 vue-quill-editor 的基本使用:vue-quill-editor - npm 一.渲染富文本编辑器运行如下的命令,在项目中安装富文本编辑器: npm i vue-q ...
CSS渲染原理，优化策略
一.css渲染原理(Cascading Style Sheets) 在介绍css渲染原理之前,我们简明扼要介绍一下页面的加载过程和浏览器渲染过程,有助于更好理解后续css渲染原理. 1.1页面的加载过 ...
CSS 渲染原理以及优化策略
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群推荐理由:由浅入深,鞭辟入里. 提起 CSS 很多童鞋都很不屑,尤其是看到 RedMonk ...
微信小程序webview、渲染富文本
先说点题外话,本来是写在简书上面的文章,现在简书不支持发布了,只能在csdn上上传了.... WebView对于前端开发的小伙伴来讲肯定不陌生,功能是很轻大的,就是一个而普通的html界面.今天主要讲 ...
html 文本强调,CSS Emphasis Marks 文本强调标记
我们常常会在网页中对文本某一关键词进行凸显强调,加粗.高亮.下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法text-emphasis. 页面文本段落中,有时我们会根据 ...
css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边解决:在before ...
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

css渲染（二）文本

css渲染（二）文本相关推荐

最新文章

热门文章

css渲染（二） 文本

css渲染（二） 文本相关推荐

最新文章

热门文章

css渲染（二）文本

css渲染（二）文本相关推荐