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

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

<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 超出隐藏实现限制字数的功能代码(多浏览器支持)