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

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

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

上代码

<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. pam和sasl

    这几天使用在Postfix搭建一个Webmail的平台,用户认证这一块最终使用了PAM.想整理一下思路,让自己对PAM有个更加清晰的认识. 1.      PAM的简介 PAM全称是:Pluggabl ...

  2. Junit单元测试初识

    写过单元测试的小童鞋对于Junit一定不陌生,可小白我,刚刚开始接触,这里就把我的测试实验,做一下记录,以便以后方便查看.学习使用JUnit4,既然使用最新版本了,就不要再考虑老版本是如何使用的了,J ...

  3. 【CF819D】Mister B and Astronomers EXGCD

    [CF819D]Mister B and Astronomers 题意:小鼠Jack想当太空人(哦不,太空鼠)!为此,它在夜晚带领一堆小朋友一起来到户外看星星.一共有 $n​$ 只小鼠,这些小鼠围成一 ...

  4. shell脚本中对简单实现对log的处理

    用shell在写小程序时,log没用像python样用logging模块可以直接使用,下面我们就简单写下用shell函数来实现log分级 #/bin/bash sys_log="/var/l ...

  5. Hexo - 把word转成markdown

    因为想用markdown写Hexo+Github发布博客(我的个人静态博客),而我的文档是word写的. 方案们 目前只研究了Mac下的方案: word-to-markdown,google用word ...

  6. 重写jquery serialize 方法

    /**取表单中的对象 *attrName:为元素的的属性名称不设置则默认为name */ $.fn.serialize = function (attrName) { var ret = {}; if ...

  7. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  8. 一次使用Python连接数据库生成二维码并安装为windows服务的工作任务

    最近有一个需求,在现有生产系统上的人员库中增加一个此人员关键信息的二维码,支持文字版和跳转版两种方式,与报表工具关联,可打印.以windows服务方式,定时检查,只要发现某人员没有此二维码信息,就生成 ...

  9. HDU 3642 - Get The Treasury - [加强版扫描线+线段树]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3642 Time Limit: 10000/5000 MS (Java/Others) Memory L ...

  10. python数据结构之树（二叉树的遍历）

    树是数据结构中非常重要的一种,主要的用途是用来提高查找效率,对于要重复查找的情况效果更佳,如二叉排序树.FP-树. 本篇学习笔记来自:二叉树及其七种遍历方式.python遍历与非遍历方式实现二叉树 介 ...