前端,文本内容太长,一行显示不下,用省略号...代替 | 您所在的位置:网站首页 › 表格里内容太多怎么隐藏一部分数据 › 前端,文本内容太长,一行显示不下,用省略号...代替 |
前端,文本内容太长,一行显示不下,用省略号...代替
一、用到的三个属性二、三个属性详解1. white-space 属性2. text-overflow 属性3. overflow 属性
一、用到的三个属性
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
三个属性配合使用: 空白符不换行 nowrap,在同一行继续显示; 文本溢出包含元素时,显示省略号 ellipsis 来代表被修剪的文本; 将溢出的文本内容隐藏 hidden示例代码: this is my Title .divBox{ max-width: 200px; border: 1px solid red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 绿媒发现:28名台湾艺人十一祝“祖国生日快乐”,“双十”全噤声效果如图: text-overflow: clip的效果:文本结尾很突兀 二、三个属性详解 1. white-space 属性white-space 属性设置如何处理文本中的空白符 空白符:空格符,制表符,换行符的统称 空格符:它不等同于键盘上的 space 键,在键盘上是没有的。它不是空格,但是能起到空格的效果,并占用一个字符位置。在计算机中,空格符号有它自己的表示方式,一般是用\O表示。 制表符:也叫制表位,功能是在不使用表格的情况下在垂直方向按列对齐文本。比较常见的应用包括名单、简单列表等。也可以应用于制作页眉页脚等同一行有几个对齐位置的行。 换行符:符号 \n ,使得光标下移一格。 white-space 属性的取值: normal:默认值,空白会被浏览器忽略。 pre:空白会被浏览器保留,其行为方式类似 HTML 中的 标签。 nowrap:文本不会换行,在同一行上继续,直到遇到 标签为止。 2. text-overflow 属性text-overflow 属性规定当文本溢出包含元素(如div、p)时发生的事情。取值如下: clip:修剪文本。能显示多少就显示多少,显示不了的隐藏。结尾处很突兀。 ellipsis:显示省略符号...来代表被修剪的文本。符合人们的常识和习惯,结尾看起来也和谐。 string:使用给定的字符串来代表被修剪的文本。 3. overflow 属性overflow 属性定义溢出元素内容区的内容会如何处理。取值如下: visible:默认值。可见,内容不会被修剪,会呈现在元素框之外。 hidden:隐藏,内容会被修剪,并且其余内容是不可见的。 scroll:滚动,内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit:规定应该从父元素继承 overflow 属性的值。 |
CopyRight 2018-2019 实验室设备网 版权所有 |