如何实现CSS限制字数,超出部份显示省略号
- <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>
效果:

语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
示例:
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。
有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,
- white-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!-- 就这三句,,,嘿嘿....->
如何实现CSS限制字数,超出部份显示省略号的更多相关文章
- 怎么实现CSS限制字数,超出部份显示点点点.
如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...
- CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...
- (转)如何实现CSS限制字数,超出部份显示点点点...
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...
- 如何实现CSS限制字数,超出部份显示点点点...
<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...
- css 控制文字超出部分显示省略号
该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...
- css 控制文字超出时显示省略号
不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- CSS控制 文字超出部分显示省略号
实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...
- css设置文字超出部分显示省略号。。。
兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
随机推荐
- 第十四篇 -- CPU学习二——此部分重点在AMD CPU
一.CPU的一些英文简写或解释 Definitions: ACPI--Advanced Configuration and Power Interface APP--Adjusted Peak Per ...
- FreeRTOS-03-其它任务相关函数
说明: 本文仅作为学习FreeRTOS的记录文档,作为初学者肯定很多理解不对甚至错误的地方,望网友指正. FreeRTOS是一个RTOS(实时操作系统)系统,支持抢占式.合作式和时间片调度.适用于微处 ...
- Android内存溢出、内存泄漏常见案例及最佳实践总结
内存溢出是Android开发中一个老大难的问题,相关的知识点比较繁杂,绝大部分的开发者都零零星星知道一些,但难以全面.本篇文档会尽量从广度和深度两个方面进行整理,帮助大家梳理这方面的知识点(基于Jav ...
- GoAhead 远程命令执行漏洞(CVE-2017-17562)
poc地址 https://github.com/ivanitlearning/CVE-2017-17562 执行 msfvenom -a x64 --platform Linux -p linux/ ...
- PXE高效装机
目录 一.PXE概述 二.PXE的优点 三.搭建PXE的前提 四.部署PXE远程安装服务 1.安装TFTP服务 2.修改TFTP服务的配置文件,并开启服务 关闭防火墙 3.安装DHCP服务 4.修改D ...
- azure bash: kubectl: command not found
[root@***]# az aks install-cliDownloading client to "/usr/local/bin/kubectl" from "ht ...
- Unity 不规则按钮实现
1.先重写Image类,实现对Image图形范围的重写: 2.对不规则按钮添加Polygon Collider2D组件,调整大小圈中要点击的范围: 3.将重写的Image类添加到不规则按钮上时,需要移 ...
- 6.算法竞赛中的常用JAVA API :Math类(转载)
6.算法竞赛中的常用JAVA API :Math类 求最值 最小值 Math.min(int a, int b) Math.min(float a, float b) Math.min(double ...
- Build Puppet Clusters with Vagrant
$ cd ~/docs/propuppetex/chapter3 $ cat Vagrantfile Vagrant.configure(VAGRANTFILE_API_VERSION) do |co ...
- Mantis安装过程笔记
安装平台:Windows Server 2003 R2 Enterprise x64 Edition 软件: EasyPHP-5.3.6.1 mantisbt-1.2.6 安装过程: 首先安装Easy ...