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 | nowrap | pre | pre-wrap | pre-line | inherit

  初始值: normal

normal: 合并空白符,允许自动换行
nowrap: 合并空白符,不允许自动换行
pre-line: 合并空白符(不包括换行符),允许自动换行
pre: 不合并空白符,不允许自动换行
pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行) 
    <div style="width: 200px;white-space: nowrap">
        They can stay 72-hours
        within 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">
        abc
        fffffffffffffffffff
        jkl
    </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;
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1....

35050
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

41620
来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

36340
来自专栏天天

面向对象编程(随机点名)

17220
来自专栏柠檬先生

css3 3d变换和动画——回顾

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d ...

20670
来自专栏程序员的知识天地

H5学习从0到1-H5列表(8)

1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心圆)square (方块)

11430
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

13130
来自专栏Windows Community

New UWP Community Toolkit - RadialProgressBar

概述 UWP Community Toolkit  中有一个圆形的进度条控件 - RadialProgressBar,本篇我们结合代码详细讲解  RadialP...

400100
来自专栏前端笔记

【 前端相关 网页样式 】总结CSS3中“伪类”与“伪元素”

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用...

35070
来自专栏Golang语言社区

Golang的iota问题

通常人们认为iota就是0,其实并非如此。 确切的说,当iota在紧跟着关键字const的第一行出现时,iota为0,在第二行出现时,iota为1,以此类推;当...

402110

扫码关注云+社区

领取腾讯云代金券