表格字段过长,用CSS实现省略号显示

<span style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;" title="字段值">字段值<span>

使用到的CSS知识点:

1、 overflow:  当内容溢出元素框时发生的事情。

JavaScript 语法:object.style.overflow="scroll"

可设置的值:

visible  默认值,不剪切内容也不添加滚动条,内容多时,会呈现在元素框之外。

hidden 内容会被修剪,并且其余内容是不可见的。

scroll  内容会被修剪,但会显示滚动条用来查看其余的内容。

auto  在必需时对象内容才会被裁切或显示滚动条;

2、white-space : 如何处理元素内的空白

JavaScript 语法:object.style.whiteSpace="pre"

可设置的值:

normal 默认值。空白会被浏览器忽略

pre 空白会被浏览器保留

nowrap 文本不会换行,直到遇到<br>标签

3、text-overflow: 当文本溢出包含元素时发生的事情。

JavaScript 语法:object.style.textOverflow="ellipsis"

可设置的值:

clip 修剪文本

ellipsis 显示省略号来代替被修剪的文本

string 使用给定的字符串来代替被修剪的文本

4、display 规定元素应该生成的框的类型。

JavaScript语法:object.style.display="none"

可设置的值:

none 元素将被隐藏,不会显示

block 元素将被显示为块级元素

        block元素的特点是:
  总是在新行上开始;
  高度,行高以及顶和底边距都可控制;
  宽度缺省是它的容器的100%,除非设定一个宽度
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

inline 元素将被显示为行内元素

       inline元素的特点是:
  和其他元素都在一行上;
  高,行高及顶和底边距不可改变;
  宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline-block 在同一行内的块级元素

       将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 (准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)






阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页