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 超出隐藏实现限制字数的功能代码(多浏览器支持)的更多相关文章
- CSS 超出隐藏问题
.dropdown-navbar>li:last-child>a { border-bottom: 0 solid #DDD; border-top: 1px dotted transpa ...
- css超出隐藏显示省略号怎么设置?
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
- css 超出隐藏显示...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- line-height超出隐藏显示的行数和垂直居中
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
随机推荐
- 《java设计模式》之责任链模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述责任链(Chain of Responsibility)模式的: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其 ...
- HR面 - 十大经典提问
1.HR:你希望通过这份工作获得什么? 1).自杀式回答:我希望自己为之工作的企业能够重视质量,而且会给做得好的员工予以奖励.我希望通过这份工作锻炼自己,提升自己的能力,能让公司更加重视我. a.“我 ...
- 傅立叶级数(Fourier Series)和周期现象
一.前言 如果你仔细观察,工作和生活中充满了周期现象:旁边linux driver工程师在调试audio driver的时候播放的1kHz的正弦信号,周末去公园游玩,游船推开水面的波纹,硬件工程师调试 ...
- apache主机(网站)配置,port监听,文件夹訪问权限及分布式权限
前言 一个网站的两个核心信息为: 主机名称(server名/网站名):ServerName server名 网站位置(网站文件夹路径):DocumentRoot "实际物理路径" ...
- iOS接收null的处理方法
常常server返回的数据,有null,还有nil,假设在模型层不处理的话,到时候数据展现时,一定会崩啊,近期决心要解决问题,所以查看了一些资料后,有答案了: - (id) setNoNull:(id ...
- APP三种开发模式
目前主流应用程序大体分为三种:Web App(网页应用).Hybrid Ap(混合应用)p. Native App(原生应用). nativeapp是一个原生程序,一般运行在机器操作系统上,有很强的交 ...
- sumatrapdf 软件介绍
sumatrapdf 软件介绍 介绍 支持PDF, ePub, Mobi, XPS, DjVu, CHM, CBZ 和 CBR格式的电子文件 仅支持Windows,原因见官网论坛 绿色版,小巧,于此 ...
- 强制删除一个Windows服务
一个挂起的服务如下图所示,该服务相关的所有按钮都被禁用,包括启动.停止.暂停和恢复. 要停止这个服务,首先记住这个服务的名称,在这里是 ‘EntropySoftCFS’. 然后打开命令行窗口,运行 s ...
- vim:查看当前的配置文件名称和地址
vim把当前使用的配置文件地址放置在变量MYVIMRC中.在vim使用echo查看即可: :echo $MYVIMRC
- openvpn上查看谁在连接服务端
在服务端/etc/openvpn目录里面有ipp.txt和openvpn-status.log,这两个文件里面记录了,访问服务器的ip网段和地址.但是这两个文件也不是专门干这个用的,也算是一种另类的用 ...