用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 ...
随机推荐
- 暑假集训D13总结
考试 又炸掉了= = 本来看着题就一脸茫然,默默的打暴力骗分,然后就交了卷= = 重要的是,在本机跑的毫无障碍的T3程序竟然在评测机CE啊喂,35分就没了啊喂(这可是比我现在分还高= =) 内心几近崩 ...
- EXTJS之Ext.util.Observable自定义事件
暂时还不会用Ext.mixin.Observable, 催悲的测试了近两个小时.这TMD的语法差距也太大了啊.. 在新版EXTJS里,已去除了addEvents. 弄个出来,大概知道下吧. <! ...
- LAS文件转TXT文件
LAS文件转TXT文件 https://www.liblas.org/start.html
- [Angular] Increasing Performance by using Pipe
For example you make a function to get rating; getRating(score: number): string { let rating: string ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台 SharePoin ...
- MySQL数据库——索引与视图
索引 MySQL的索引包括普通索引.唯一性索引(unique index).全文索引(fulltext index).单列索引.多列索引和空间索引等. 1.索引的创建 ·创建表的时候创建索引 SQL语 ...
- 消除ADB错误“more than one device and emulator”的方法
当我连着手机充电的时候,启动模拟器调试,运行ADB指令时,报错. C:\Users\gaojs>adb shell error: more than one device and emulato ...
- luogu2766 最长不下降子序列问题 DP 网络流
题目大意:给定正整数序列x1,...,xn .(1)计算其最长不下降子序列的长度s.(不一定是否连续)(2)计算从给定的序列中最多可取出多少个长度为s的不下降子序列.(序列内每一个元素不可重复)(3) ...
- c19---指针和字符串
// // main.c // 指针和字符串 // // Created by xiaomage on 15/6/14. // Copyright (c) 2015年 xiaomage. All ri ...
- php basic syntax
php basic syntax PHP(Hypertext Preprocessor,超文本预处理器). 一.PHP入门 1.指令分隔符“分号” 语义分为两种:一种是在程序中使用结构 ...