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

来源：互联网发布：分析家行情软件编辑：程序博客网时间：2024/05/18 09:06

.oneline_nobreak {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

<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"样式。

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 脚本语法：

object.style.overflow="hidden"

例子

p{    overflow: scroll}

可能的值

值描述

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

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

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

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

0 0