one more time one more chance. 一歩重头学前端, css入门。

学习一些 CSS 文本控制的属性,防止做傻事。请大家对照下面列表检验下: 会的、不会的、似懂非懂的。笔者是一个也不会。

  1. white-space
  2. text-overflow: ellipsis;
  3. word-break, word-wrap
  4. text-align: justify
  5. text-decoration
  6. text-transform
  7. text-indent
  8. letter-spacing
  9. word-spacing

文本溢出显示(...)

.truncate {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

这个简单的 css语句,使用的比较多了吧,那么请解释下 white-space 和 text-overflow,我尼玛,并不会是不是。

white-space

white-space用来设置内容中的空格的处理方式。

white-space:normal | pre | nowrap | pre-wrap | pre-line

white-space: nowrap不换行,空格会被合并: 1. 第一行开始我写了好多空格在实际效果中被合并成了一个;2. 然后中间又键入了回车,但是前端并未换行; 3. <br />是可以使文本换行的;

white-space: pre保留空格(包括键入的回车换行),单行文本过长时不会自动换行, <br />在任何情况下都是可以生效的。
See the Pen

pre-wrap是pre 的升级版,当单行文本过长,超过文本边界时自动换行。请自行演示代码。pre-line作为自学内容。

text-overflow

用来定义当文本超出容器边界时如何处理。

/*切断 | 使用省略号 | 使用自定义的字符串*/
text-overflow: clip|ellipsis|string;

看个极端点的例子: 给 div 宽度限定为 width:500px,然后 overflow: hidden 确定该 div 的 文本边界,不能再多了,再然后 white-space: pre 保留空格,但是当文本超出边界时不会自动换行,这样每行文本就都超出了边界,此时我们再尝试使用 text-overflow 进行溢出限制。

See the Pen

那么现在就可以解释单行文本溢出时加三个点显示的代码了:

white-space: nowrap; /*容器内的文本单行显示*/
overflow: hidden; /*确定文本边界,容器的边界就是文本的界限不可以突出去*/
text-overflow: ellipsis; /*超出的部分使用3个点代替*/

不要忘记思考: 多行文本溢出,省略显示如何实现。

word-break, word-wrap

推荐大家阅读你真的了解word-wrap和word-break的区别吗
word-wrap 和 word-break 问答
断字规则
每种语言都有各自的默认断字规则,在哪个位置可以插入break-points(断点),当需要换行显示时,会根据这些断点来决定从文字的哪个位置开始换行。 比如汉字你好吗的断点你·好·吗,中间的点表示断点的位置; 比如英文hello world的断点hello·world;

那么,我们可能想要改变这些默认的断点规则,word-break属性就是做这个的,它会改变默认的断点规则。当设置word-break: break-all;的时候,上面的汉字断点规则并没有改变,英文的断点除了默认的空白符和符号断点外,还会在任意两个字母之间添加断点,也就是说任意位置是可以断开的,此时英文hello world的断点也就变为h·e·l·l·o·w·o·r·l·d;

文字排版会按照断字规则(浏览器规则或自定义规则)进行排版,如果一个很长很长的单词中间又是不可断的时候word-wrap就可以上场了,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。word-wrap: break-word它会首先尝试将整个长单词挪到下一行,看看下一行的宽度够不够,不够的话还会进行单词内的断句。

word-break: normal|break-all|keep-all;word-break的本质是更改断点规则, normal 正常规则,break-all 到处都可以断,keep-all只能在半角空格或连字符处换行(试试长中文的句子就明白了)。

See The Pen

word-wrap: normal|break-word;normal,只在允许的断字点换行基于浏览器默认设置或者 word-break 的设置。break-word它会首先尝试将整个长单词挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。

综上,我自己明白了,可能大家已经被我绕晕了。

white-space word-wrap word-break 三者的关系

white-space、word-wrap、word-break 是不太好理解。没解释明白的话,请跳转连接看看大牛们的文章。

若设置了 white-space 后,word-wrap 和 word-break又如何表现呢? 请记住white-space 老大,word-break 老二,word-wrap 第三。如果设置了 white-space: nowrap,后两者是不起作用的。

See the Pen

text-align: justify 两端对齐

是不是都用过 text-align: left | right;那么 justify 是干什么的呢?下图是个常见的需求文字两端对齐。

笔者曾经使用&nbsp;来打空格,真是 SB 啊,用这么 low 的方法明显反应出我既不会 text-align 也不会 white-space。

css的两端对齐有个,最后一行的文字不会两端对齐,而是左对齐。
推荐大家看看大漠的解释: 在其自然状态下,"text-align:justify"就不能工作,除非内容足够长并引起一个换行符。否则,文本仍然左对齐。如果你想知道这是为什么,这是因为在排版中这是理想的行为——一个块中的最后一行文本总是左对齐。也许这是一个CSS规范设计,即使我们只有一行文本,这一行还是像最后一行一样,让文本左对齐。

如何保证两端对齐呢? 人为插入一行东西,使得文本处于倒数第二行。

See The Pen

text-decoration

文字装饰text-decoration : none | underline | blink | overline | line-through
在修饰 a 标签时用的较多用于去除下划线。

a {
text-decoration: none;
}

text-transform

text-transform 属性控制文本的大小写。学会了该属性,我们再也不用使用 js 来切换大小写了。
text-transform: none | capitalize | uppercase | lowercase

See The Pen

text-indent

控制首行缩进,有了它也不用&nbsp了,简单好用。

p {
text-indent:50px;
}

letter-spacing word-space

letter-spacing和word-spacing这两个属性都用来控制元素中的空白宽度的。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请大家注意,word-spacing对中文无效。

See The Pen

引用

你真的了解word-wrap和word-break的区别吗
word-wrap 和 word-break 问答
断字规则
Text-align:Justify和RWD
text-align:justify两端对齐有个坑

前端学习QQ群: 538631558 欢迎大家批评指正

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境,支持绝大部分编程语言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,无需下载安装程序,一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。

CSS 文本控制的更多相关文章

  1. CSS文本控制

    CSS文本控制 文本基础设置 字体设置 font-family可定义多个字体,系统会以从左至右的顺序进行查找,如左侧字体不存在,就往右侧找. 为什么要这么做呢?如果你只用了一种字体,而恰好人家电脑上没 ...

  2. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  3. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...

  4. 网页中的CSS换行控制

    在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: whit ...

  5. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

  6. [CSS]文本属性(Text)

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  7. CSS 文本、字体、链接

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  8. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  9. CSS文本实例

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等.#############################CSS 文本属性属 ...

随机推荐

  1. 在 Nebula K8s 集群中使用 nebula-spark-connector 和 nebula-algorithm

    本文首发于 Nebula Graph Community 公众号 解决思路 解决 K8s 部署 Nebula Graph 集群后连接不上集群问题最方便的方法是将 nebula-algorithm / ...

  2. Spring源码之九finishRefresh详解

    Spring源码之九finishRefresh详解 公众号搜索[程序员田同学],专职程序员兼业余写手,生活不止于写代码 Spring IoC 的核心内容要收尾了,本文将对最后一个方法 finishRe ...

  3. web -- ssrf

    web学习之SSRF 最开始玩ctf接触的就是web但是随着开始逐渐专注于pwn,在加之web的知识体系本来就繁杂,所以准备写一期关于web大体的知识 day1 SSRF SSRF(Server-Si ...

  4. laravel7 webuploader上传图片

    webuploader上传 前提工作: 1>了解 代码如下:1.app_path() app_path函数返回app目录的绝对路径: $path = app_path(); 你还可以使用app_ ...

  5. php ajax 修改,删除,添加(学做)

  6. 【故障公告】没有龙卷风,k8s集群翻船3次,投用双集群恢复

    今天没有龙卷风(异常的高并发请求),故障却依然出现,问题非常奇怪. 某种异常情况会造成短时间内, k8s 集群中大量 pod (超过60%)因健康检查失败而处于 CrashLoopBackOff 状态 ...

  7. [差分数组] LeetCode789 得分最高的最小轮调

    LeetCode 得分最高的最小轮调 今天当然CV了因为今天比较忙,所以直接走算法,因为什么都不做的话并不符合社会主义核心价值观,今天小学一手查分数组. 题目:并不存在CV了还写什么题解 算法背景: ...

  8. Python入门随记(3)

    1.len() 长度或规模函数 2.Unicode转为单字符用chr() 单字符转为Unicode用ord() 3.关于字符的操作函数 函数 作用 lower() 变为小写 upper() 变为大写 ...

  9. 闲聊系列之 5-why root cause分析法

    本篇参考: https://max.book118.com/html/2017/1126/141669829.shtm https://baike.baidu.com/item/5why%E5%88% ...

  10. RocketMQ 事务消息示例分析

    @ 目录 1 示例模式 2 安装与配置 RocketMQ 3 运行服务 3.1 启动 NameServer 3.2 启动 broker 4 生产者 4.1 事务监听器 4.2 事务消息生产者 5 消费 ...