说明

本文的“文本”相关属性控制的是整段、整个div内文本的显示效果，包括文本文字的缩进、段内文字的对齐方式、文本中空白字符的处理等等，需要掌握。

网页源码

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html"; charset="utf-8"/><title>文本属性</title><style type="text/css">div {border:1px solid #000000;height: 80px;width: 200px;}</style></head><body><!--缩进20pt--><div style="text-indent:20pt">text-indent:20pt</div><!--缩进40pt--><div style="text-indent:40pt">text-indent:40pt</div><!--左对齐--><div style="text-align:left">text-align:left</div><!--居中对齐--><div style="text-align:center">text-align:center</div><!--右对齐--><div style="text-align:right">text-align:right</div><!--两端对齐--><div style="text-align:justify">text-align:justify</div><!--文本从右边流入--><div style="direction:rtl">direction:rtl</div><!--文本从左边流入--><div style="direction:ltr">direction:ltr</div><!--当文字溢出的时候只做简单的裁剪--><div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">overflow:hidden;white-space:nowrap;text-overflow:clip;</div><!--当文字溢出的时候裁剪之后显示裁剪标记--><div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">overflow:hidden;white-space:nowrap;text-overflow:ellipsis;</div><!--按照默认情况忽略文本中的空白--><div style="white-space:normal">white-space :   normalwhite-space :   normal</div><!--保留文本中的所有空白--><div style="white-space:pre">white-space :   prewhite-space :   pre</div><!--处理换行标签绝不换行--><div style="white-space:nowrap">white-space :   nowrapwhite-space :   nowrap</div><!--保留空白符序列但可以正常的进行换行--><div style="white-space:pre-wrap">white-space :   pre-wrapwhite-space :   pre-wrap</div><!--合并空白符序列，但保留换行符--><div style="white-space:pre-line">white-space :   pre-linewhite-space :   pre-line</div><!--从指定父元素继承white-space元素的值--><div style="white-space:inherit">white-space :   inheritwhite-space :   inherit</div><!--按照默认的规则进行换行--><div style="word-break:normal">word-break:normalword-break:normal</div><!--只能在半角空格或者连字符处换行--><div style="word-break:keep-all">word-break:keep-allword-break:keep-all</div><!--设置允许在单词中间换行--><div style="word-break:break-all">word-break:break-allword-break:break-all</div><!--按照浏览器默认规则换行，针对长单词或者URL--><div style="word-wrap:normal;">aaaaaaaaaaaaaaaa https://blog.csdn.net/weixin_43896318</div><!--允许在单词中间进行换行，针对长单词或者URL--><div style="word-wrap:break-word;">aaaaaaaaaaaaaaaa https://blog.csdn.net/weixin_43896318</div></body>
</html>

网页展示

说明

建议使用Chrome浏览器查看，因为Firefox浏览器对这里有些功能不支持……真的……

【CSS3】CSS3文本相关属性大全相关推荐

CSS3的字体和文本相关属性
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题.通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电 ...
CSS样式字体与文本相关属性
CSS样式字体与文本相关属性字体相关属性基本属性添加阴影添加多阴影微调字体大小颜色表示文本相关属性文本基本属性文本自动换行长单词和URL地址换行 CSS3新增服务器字体字体相关属 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
【CSS3】CSS3文本字体相关属性大全
字体相关属性测试 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
CSS3新增的相关属性
文章目录前言 CSS3属性一,实现深色模式和浅色模式的切换 1.1,"checked"作用 1.2,语法 1.3,例二,盒子模型(背景) 2.1,释义 2.2 , " ...
CSS3 对文本的基本设置大全
color属性:设置文本文字颜色.用法如下: color:颜色值; color属性可以设置的合法颜色值包括:16进制颜色值(例:#ffffff),rgb颜色值[例:rgb(0,0,0)],rgba颜色 ...
CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些发布时间:2021-04-02 17:39:08 来源:亿速云阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
css3背景、边框、和补丁相关属性
border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的 ...

【CSS3】CSS3文本相关属性大全

说明

网页源码

网页展示

说明

【CSS3】CSS3文本相关属性大全相关推荐

最新文章

热门文章