文章目录
写在前面一.用到的相关属性1.white-space2.word-break3.text-overflow:4.`overflow`二.单行文本溢出三.多行文本溢出写在前面
这里是小飞侠Pan🥳,立志成为一名优秀的前端程序媛!!!
本篇博客收录于我的github前端笔记仓库中,持续更新中,欢迎star~
👉/mengqiuleo/myNote
一.用到的相关属性
1.white-space
这个属性是用来控制空白字符的显示的,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line
。默认是normal
。
①white-space: nowrap
:
不仅空格被合并,换行符无效,连原本的自动换行也没有了!只有<br>
才能导致换行!所以可以理解为永不换行
。
元素内文本如果有多个空格在一起或换行符,浏览器只会显示一个空格;元素文本内容不会自动换行,只有遇到标签才会换行;
②white-space:pre
:
空格和换行符被保留,但不会有自动换行。pre
其实是preserve
的缩写。
保留空白或换行符(回车键)。输入几个空格,浏览器显示的时候就是几个空格,其实就是原样输出,如果有换行符,换行符后的内容会从下一行开始。
③white-space:pre-wrap
:
显然pre-wrap
就是preserve
+wrap
,保留空格和换行符,且可以自动换行。
④white-space:pre-line
:
空格被合并了,但是换行符可以发挥作用,line
应该是new line
的意思,如果有换行符(回车键),换行符后的内容会从下一行开始,不会影响自动换行。所以pre-line
其实是preserve``new line
+wrap
。
总结:
normal:忽略多余的空白,只保留一个空白(默认);不会影响自动换行(就是元素内容过长,在一行上显示不完,会从下一行开始);pre:保留空白(行为方式类似于html中的pre标签);nowrap:只保留一个空白,文本不会换行,会在在同一行上继续,直到遇到br标签为止。pre-wrap:保留空白符序列,正常地进行换行;pre-line:合并空白符序列,保留换行符;inherit:从父元素继承white-space属性的值。
注:
 :
在 html 里是空格占位符,普通的空格在 html 里如果连续的多个可能被认为只有一个,而这个东西你写几个就能占几个空格位。
2.word-break
这个属性是控制单词如何被拆分换行的。它有三个值:normal | break-all | keep-all
。
①word-break:keep-all
:
所有“单词”一律不拆分换行,注意,这里的“单词”包括连续的中文字符(还有日文、韩文等),或者可以理解为只有空格可以触发自动换行
②word-break:break-all
:
所有单词碰到边界一律拆分换行,不管是incomprehensibilities
这样一行都显示不下的单词,还是long
这样很短的单词,只要碰到边界,都会被强制拆分换行。
③word-wrap(overflow-wrap)
:
word-wrap
又叫做overflow-wrap
:这个属性也是控制单词如何被拆分换行的,实际上是作为word-break
的互补,它只有两个值:normal | break-word
。
只有当一个单词一整行都显示不下时,才会拆分换行该单词。
3.text-overflow:
text-overflow: clip | ellipsis
,
默认值:clip;
适用于:所有元素
clip
:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。
ellipsis
:当对象内文本一处时显示省略标记(…)。
但需要与overflow:hidden; white-space:overflow;
配合使用才能有效果。
4.overflow
overflow
属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值:
visible
: 默认值。内容不会回修剪,可以呈现在元素框之外。hidden
: 如果内容超出父级容器,超出部分将会被隐藏scroll
: 无论是否超出容器,都会出现一个滚动条。auto
: 如果没有超出容器的显示,将会正常显示,如果超出,将会出现一个滚动条。
使用 overflow 的前提
为使overflow
有效果,容器必须满足以下条件:
dispaly
的值非inline
。具有尺寸限制。(width
/height
/max-width
/max-height
/absolute
拉伸 )对于单元格td
等,还需要table
为table-layout: fixed
才可以。
滚动条出现的条件
滚动条出现条件主要分为以下两种:
使用overflow
属性出现的滚动条HTML 元素自带的,例如<html>
和<textarea>
属性。
默认滚动条是来自于<html>
元素而不是<body>
元素。滚动条也会占用用容器的可用宽度或者高度。
二.单行文本溢出
对于单行文本,使用单行省略:
{width: 200px;/*display: inline-block; (有时候需要加)*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
举例:
display: inline-block; 需要加的时候。
当需要将文本整块省略时,当直接使用平常的方案。
.person-card__desc {width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
结果如下:
将display: inline
改为display: inline-block
实现整块省略
如果需要实现一整块的省略,只需要将包裹整块标签元素的span
的display
由inline
改为inline-block
即可。
.person-card__desc span {display: inline-block;}
三.多行文本溢出
{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。