css单行文本及多行文本溢出显示省略号

关于文本溢出的相关属性:

1. text-overflow: clip|ellipsis|string;   该属性规定当文本溢出包含元素时发生的事情。

 　　clip : 修剪文本。

　　 ellipsis : 显示省略符号来代表被修剪的文本。

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

2. white-space 属性设置如何处理元素内的空白。

可能的值及含义：

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

 

 

 

 

 

这里用上面两个属性实现单行文本溢出：

<p>该属性规定当文本溢出包含元素时发生的事情。</p>

p {
    white-space:nowrap;         /* 规定段落中的文本不进行换行：*/
    width: 5rem;                /* 规定容器的宽度，文本内容长度一定要小于容器宽度 */
    overflow: hidden;           /*隐藏超出部分*/
    text-overflow: ellipsis;    /*显示省略符号来代表被修剪的文本。*/
}

  (单行文本溢出效果图 :)

 上面实现了单行文本溢出显示省略号，比较简单，那如果要实现多行文本溢出的话则涉及到更多的属性：

3. box-orient  属性规定框的子元素应该被水平或垂直排列。

浏览器支持：

　目前没有浏览器支持 box-orient 属性。

　Firefox 支持替代的 -moz-box-orient 属性。

　Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。

可能的取值：

horizontal	在水平行中从左向右排列子元素。
vertical	从上向下垂直排列子元素。
inline-axis	沿着行内轴来排列子元素（映射为 horizontal）。
block-axis	沿着块轴来排列子元素（映射为 vertical）。
inherit	应该从父元素继承 box-orient 属性的值。

 

4. -webkit-line-clamp 是一个不规范的属性，因为它没有出现在 CSS 规范草案中。

　限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display：-webkit-box；必须结合的属性，将对象作为弹性伸缩盒子模型显示 。

• -webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。

• text-overflow：可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

这里用上面的属性实现多行文本溢出：

<p>
   这里是显示书目内容简介,H+IDE是一个能够大大提升Html页面开发速度的一个模板资源整合开发工具,提升工作效率,值得推广使用!
</p>

p {
    font-size: 0.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   //控制显示的文本的行数
    overflow: hidden; 
}

(多行文本溢出效果图)

5. 设置了文本溢出显示省略号后，往往需要判断当前文本是否溢出，从而做相应的操作：

$("p").mouseover(function() {
　　// 单行的判断width 或者 多行的判断 height
    if (this.offsetWidth < this.scrollWidth) {
        console.log("溢出了");
    }else{
        console.log("没有溢出");
    }
});

　　经测试，该判断文本是否溢出的代码在IE8下可以正常运行！！！ : )