资讯专栏INFORMATION COLUMN

CSS 文本控制

Taonce / 2484人阅读

摘要:学习一些文本控制的属性,防止做傻事。是的升级版,当单行文本过长,超过文本边界时自动换行。否则,文本仍然左对齐。

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

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

white-space

text-overflow: ellipsis;

word-break, word-wrap

text-align: justify

text-decoration

text-transform

text-indent

letter-spacing

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.
是可以使文本换行的;

white-space: pre保留空格(包括键入的回车换行),单行文本过长时不会自动换行,
在任何情况下都是可以生效的。
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 是干什么的呢?下图是个常见的需求文字两端对齐。

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113490.html

相关文章

  • CSS基础知识整理

    摘要:语法基础语法规则由两个主要部分构成选择器以及一条或多条声明。语法名属性属性值属性属性值属性属性值选择器选择器用于描述一组元素的样式,也叫做类选择器。后代选则器又称为包含选择器,以空格分隔,子元素选择器只能选择作为某元素子元素的元素。 1 什么是CSS? CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高...

    Edison 评论0 收藏0
  • 【芝士整理】CSS基础图谱

    摘要:为了实现文字环绕效果,规范规定的措施是使父容器塌陷,元素脱离文档流浮动产生,元素周围的内容转换为围绕元素排列。 选择器注意点 属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

    iOS122 评论0 收藏0
  • css文本模型漫游指南

    摘要:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。常见的内联元素有分类替换元素在中,可替换元素的展现效果不是由来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于的。 前言 在写作本文章前原本打算只是复习一下 line-height 和 vertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, ...

    cncoder 评论0 收藏0
  • css文本模型漫游指南

    摘要:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。常见的内联元素有分类替换元素在中,可替换元素的展现效果不是由来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于的。 前言 在写作本文章前原本打算只是复习一下 line-height 和 vertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, ...

    Freelander 评论0 收藏0

发表评论

0条评论

Taonce

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<