在网页排版设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采 用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>

代码分析:

  1. width:200px; //指定宽度:
  2. overflow:hidden; //将超出内容隐藏
  3. text-overflow:ellipsis; //IE专用属性,文本溢出时显示省略标记();其他浏览器不支持。
  4. white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素

目前使用这种方法比较成功的示例是Gmail的内容显示,在IE下达到最好的效果。如果是FF那就比较糟糕,总是会出现截取半个中文 的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效,目前很多CSS属性也存在这个问题,特别重要的是Margin和Padding这两个属性,往往导致页面出现各种不同的效果;在 页面设计的时候,需要注意这些属性在不同浏览器的显示效果。

用CSS来控制字符长度和显示长度的更多相关文章

  1. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  2. C# 计算字符串在控制台中的显示长度

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  3. 怎么实现CSS限制字数,超出部份显示点点点.

    如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...

  4. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. SA密钥长度、明文长度和密文长度

    本文介绍RSA加解密中必须考虑到的密钥长度.明文长度和密文长度问题,对第一次接触RSA的开发人员来说,RSA算是比较复杂的算法,RSA的复杂度是因为数学家把效率和安全也考虑进去的缘故. 本文先只谈密钥 ...

  8. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  9. 限制标题字符串的长度,超过长度的截取并加上"..."

    /// <summary> /// 限制标题字符串的长度,超过长度的截取并加上"..." /// </summary> /// <param name ...

随机推荐

  1. Spring MVC-概述(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_overview.htm 说明:示例基于Spring MVC 4.1.6. Spr ...

  2. [Android 4.4.2] 泛泰A850 Mokee4.4.2 20140509 RC2.0 by syhost

    感谢: tenfar(R大师),zhaochengw(z大).windxixi(雪狐),xuefy(大星星).suky, cofface 感谢參考代码:  Cyanogenmod , martincz ...

  3. GitLab创建项目

    创建自己的项目:通过地址进入 在文件夹下使用git bash进行 git init,然后ctrl+右键使用TortoiseGit>右键setting 然后再右键setting 拷贝代码时注意要h ...

  4. 使用OpenSSL做RSA签名验证 支付宝移动快捷支付 的server异步通知

    因为业务须要.我们须要使用支付宝移动快捷支付做收款.支付宝给了我们<移动快捷支付应用集成接入包支付接口>见支付宝包<WS_SECURE_PAY_SDK>. 支付宝给的serve ...

  5. 项目产品化——Excel数据库模板化导入(java)

    Excel导入可能是代码开发中比較常见的功能,一个项目假设有多个地方须要excel导入数据库.那么开发的工作量也将比較大,项目产品化过程中,将这么一个类似的功能进行封装合并也是必要的.封装好的代码仅仅 ...

  6. linux下nmap工具的使用

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工 具包,其基本功能有三个,一是探测一组主机是否在线:其次是扫描主机端口,嗅探所提供的网络服务:还可以推断主机所用的操作系统 ...

  7. Hdu-6243 2017CCPC-Final A.Dogs and Cages 数学

    题面 题意:问1~n的所有的排列组合中那些,所有数字 i 不在第 i 位的个数之和除以n的全排,即题目所说的期望,比如n=3 排列有123(0),132(2),231(3),213(2),312(3) ...

  8. js中国各大城市快速选择代码

    js中国各大城市快速选择插件 在线演示本地下载

  9. 学习环境搭建1——安装python

    操作系统:windows7 64bit 下载地址python :https://www.python.org/      下载Windows x86-64 executable installer 安 ...

  10. Google浏览器“无法添加来自此网站的应用、扩展程序和应用脚本”的解决办法

    原文链接:https://blog.csdn.net/Fan_Weibin/article/details/80402790 解决方法如下: 在桌面找到Google Chrome图标→右击属性→在快捷 ...