用CSS来控制字符长度和显示长度
在网页排版设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采 用CSS的代码控制来实现文本截取的方法,与程序员的直接字符截取的方式有些区别,其优势是可以自动控制文本显示的长度;缺点是不同浏览器的兼容性并不完 美。
使用overflow,text-overflow,white-space这三个主要的属性,其他的代码属于修饰作用。
CSS代码:
<style>
.texthidden{
width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #ddd;}
</style>
HTML代码:
<div class="texthidden">
CSS让容器的溢出部分内容隐藏起来
</div>
代码分析:
- width:200px; //指定宽度:
- overflow:hidden; //将超出内容隐藏
- text-overflow:ellipsis; //IE专用属性,文本溢出时显示省略标记();其他浏览器不支持。
- white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素
目前使用这种方法比较成功的示例是Gmail的内容显示,在IE下达到最好的效果。如果是FF那就比较糟糕,总是会出现截取半个中文 的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效,目前很多CSS属性也存在这个问题,特别重要的是Margin和Padding这两个属性,往往导致页面出现各种不同的效果;在 页面设计的时候,需要注意这些属性在不同浏览器的显示效果。
用CSS来控制字符长度和显示长度的更多相关文章
- css控制文字长度,超出长度显示...
css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...
- C# 计算字符串在控制台中的显示长度
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
- 怎么实现CSS限制字数,超出部份显示点点点.
如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css把超出的部分显示为省略号的方法兼容火狐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- SA密钥长度、明文长度和密文长度
本文介绍RSA加解密中必须考虑到的密钥长度.明文长度和密文长度问题,对第一次接触RSA的开发人员来说,RSA算是比较复杂的算法,RSA的复杂度是因为数学家把效率和安全也考虑进去的缘故. 本文先只谈密钥 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 限制标题字符串的长度,超过长度的截取并加上"..."
/// <summary> /// 限制标题字符串的长度,超过长度的截取并加上"..." /// </summary> /// <param name ...
随机推荐
- netty byteBuf (二)
netty重新定义了byteBuf 而没使用jdk byteBuffer netty byteBuf与jdk byteBuffer的区别 (1)jdk buffer长度固定 byteBuf超过最大 ...
- 关于约束ENABLE NOVALIDATE的一个疑问
http://www.dbunix.com/?p=188 关于约束ENABLE NOVALIDATE的一个疑问 CREATE TABLE test (id varchar2(12), name var ...
- Linux排序命令sort(转)
Linux sort命令用于将文本文件内容加以排序.sort可针对文本文件的内容,以行为单位来排序. 语法 sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符&g ...
- Android ORM——初识greenDAO 3及使用greenDAO 3前应该掌握的一些知识点(一)
引言 总所周知,SQLite--内嵌于Android中一个占用内存极小的关系型,作为我们Android存储领域中重要的一员 ,或多或少都曾接触到数据库.即使Android系统中提供了很多操作SQLit ...
- leetcode解题文件夹
点击打开链接点击打开链接点击打开链接參考文献:http://blog.csdn.net/lanxu_yy/article/details/17848219 只是本文准备用超链接的方式连接到对应解答页面 ...
- PL SQL Developer client 连接server
安装完Oracle,PLSQL之后,在server中打开监听. 计算机右键-管理-服务和应用程序-服务-打开以Oracle开头的服务,特别是监听,这个最重要.详细如图所看到的. (1)配置监听的位置 ...
- HDU3496 Watch the Movie 背包
题目大意:给你n张电影门票,但一次只可以买m张,并且你最多可以看L分钟,接下来是n场电影,每一场电影a分钟,b价值,要求恰好看m场电影所得到的最大价值,要是看不到m场电影,输出0. 三个限制: 选电影 ...
- rk3288的pcba模块编译调试笔记【学习笔记】
平台信息:内核:linux3.0.68 系统:android/android6.0平台:rk3288 作者:庄泽彬(欢迎转载,请注明作者) 邮箱:2760715357@qq.com 摘要:最近在负责r ...
- [JavaEE] Hibernate连接池配置测试
转载自51CTO http://developer.51cto.com/art/200906/129914.htm Hibernate支持第三方的连接池,官方推荐的连接池是C3P0,Proxool,以 ...
- BZOJ 1485 卡特兰数 数学
思路: 通过打表观察 这是个卡特兰数 但是它mod的数不是质数 怎么办呢 把所有数分解质因数好了 线性筛出mindiv 顺着mindiv分解质因数 复杂度$O(nlogn)$ //By Sirius ...