码迷,mamicode.com
首页 > Web开发 > 详细

CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)

时间:2014-09-09 15:11:28      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   java   ar   for   div   sp   

<html>
<title>css控制字数</title>
<head>
<style type="text/css">
.dd {
    border: solid 1px gray;
    width: 180px;
    course: hand;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* for IE */
    -o-text-overflow: ellipsis; /* for Opera */
    -icab-text-overflow: ellipsis; /* for iCab */
    -khtml-text-overflow: ellipsis; /* for Konqueror Safari */
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
    -webkit-text-overflow: ellipsis; /* for Safari,Swift*/
}
</style>
</head>
<body>
    <span class="dd" style="display: block">

        信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数 </span>
    <br>
    <div class="dd">信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数
    </div>
</body>
</html>

备注:<span>标签不是块标签,如果没有办法显示为预期的样子,则需要将其改为块标签,添加 style="display: block"样式。

 

object.style.whiteSpace="nowrap"在我们的 HTML DOM 教程中,您可以找到更多有关 whiteSpace 属性的细节。

p

{

white-space: normal

}

可能的值

值 描述

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

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

 

名称:text-overflow

分类:IE专有样式

简述:设置是否使用省略号标示文本溢出

概述:text-overflow是设置是否使用省略号标示文本溢出的样式(Style)。

text-overflow详细说明语法:

text-overflow : clip | ellipsis

取值:

clip : 默认值。不显示省略标记(...),而是简单的裁切

ellipsis : 当对象内文本溢出时显示省略标记(...)

 

overflow 属性设置当元素的内容溢出其区域时发生的事情。

继承性:No

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素

框中可以放下所有内容也会出现滚动条。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

 

脚本语法:

object.style.overflow="hidden"在我们的 HTML DOM 教程中,您可以找到更多有关 overflow 属性 的细节。

在我们的 HTML DOM 教程中,您也可以找到完整的 Style 对象参考手册。

例子

p

{

overflow: scroll

}

可能的值

值 描述

visible 默认。内容不会被修剪,会呈现在元素之外。

hidden 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。

scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)

标签:style   blog   color   使用   java   ar   for   div   sp   

原文地址:http://www.cnblogs.com/xiaochao12345/p/3955611.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!