我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能!

而并没有获取光标提示的功能,所有小弟就结合网上的代码改了个带省略号并且获取光标显示全部的功能,废话不多说先上效果图!

如果文本超出了指定宽度就会用...省略,并且当鼠标获取光标的时候会显示全部!

上代码

<span style=' width:290px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden; display: block; '>

<span style="margin: 20px;">位   置:</span>

<abbr title='四川省绵阳市梓潼县文昌镇金龙乡一大队二组205号'>四川省绵阳市梓潼县文昌镇金龙乡一大队二组205号</abbr>

</span>

　　

　　

css 文本超出容器长度后自动省略的方法!的更多相关文章

  1. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  3. CSS3文本超出容器显示省略号之text-overflow属性

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 要想实现文本超出容器时显示省略号,上面3个属性必须同时搭配使用

  4. web容器启动后自动执行程序的几种方式比较

    1.       背景 1.1.       背景介绍 在web项目中我们有时会遇到这种需求,在web项目启动后需要开启线程去完成一些重要的工作,例如:往数据库中初始化一些数据,开启线程,初始化消息队 ...

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

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

  6. 不值一提，却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  7. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  8. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  9. css文本超出隐藏 显示三个点

    文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

随机推荐

  1. javaweb基础 01--JSP取得绝对路径应用

    1.相关函数说明 * request.getScheme() 等到的是协议名称,默认是http * request.getServerName() 得到的是在服务器的配置文件中配置的服务器名称 比如: ...

  2. POJ 3579 Median（二分答案）

    Median Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11599 Accepted: 4112 Description G ...

  3. 对Java中使用两个大括号进行初始化的理解

    最近重读Java 编程思想,读到有关实例化代码块儿 的内容,使我对于使用两个大括号进行初始化有了更深的理解. 实例化代码块儿: 和静态代码块儿的概念相对应,静态代码块儿是static 关键字 + 大括 ...

  4. SQL Server2008 R2 安装失败后的解决办法

    当你第一次安装SQL Server2005,SQL Server2008,SQL Server2012失败后,第二次重新安装一般还是容易安装失败,原因就是你没有完全卸载,还存留残留文件和注册表. 我安 ...

  5. kvm虚拟机的重命名

    1.查看所有的kvm虚拟机 [root@5201351_kvm ~]# virsh list --all 2.重命名kvm虚拟机最好是将虚拟机先关机,然后再导出其xml文件 [root@5201351 ...

  6. JDBC改进版

    将setObject隐藏,用反射获取model里面的数据 /** * @Date 2016年7月19日 * * @author Administrator */ package com.eshore. ...

  7. ElasticSearch 安装 go-mysql-elasticsearch 同步mysql的数据

    一.首先在Centos6.5上安装 go 语言环境 下载Golang语言包:https://studygolang.com/dl [hoojjack@localhost src]$ ls apache ...

  8. MapReduce计算之——hadoop中的Hello World

    1.  启动集群 2.  创建input路径(有关hadoop 的命令用 "hadoop fs"),input路径并不能在系统中查找到,可以使用 “hadoop fs -ls /” ...

  9. easyUi引入方法

    1:创建一个动态web工程:    去官网http://www.jeasyui.net/download/下载官网文档    我去官网下载的最新版本,个人根据自己的需求下载即可.2:在webConte ...

  10. /etc/rc.d/rc.local 自定义开机启动程序

    /etc/rc.d/rc.local 用于用户自定义开机启动程序,可以往里写开机要执行的命令或脚本,线上的配置如下: [root@localhost ~]$ cat /etc/rc.d/rc.loca ...