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

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

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

上代码

<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. qcow2、raw、vmdk等镜像格式的比较和基本转换

    注:本文转自http://www.cnblogs.com/feisky/archive/2012/07/03/2575167.html   云计算用一个朋友的话来说:”做云计算最苦逼的就是得时时刻刻为 ...

  2. explain 和 desc 详解

    MySQL性能分析 1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id  selecttype  table  ty ...

  3. 如何在Computer下添加System Folder

    1.创建一个GUID标识该系统目录,比如:{7854FF7A-470F-4D04-9FC5-4CFC7B2A0E89}.下面的操作步骤将全部使用这个示例GUID. 2.打开注册表编辑器(Registr ...

  4. Android Usb Camera HAL框架

  5. AD PCB中两个不同高度器件重叠 软件报警告变绿

    这个问题遇到几次了,每次都要在网上搜索解决方法,今天记下来! 在规则里面不检查器件高度这项应该是最简单,也不影响其他规则的方法了! 具体操作: Design - rules - Component C ...

  6. 完美解决Android SDK Manager无法更新

    由于国内的各种屏蔽现在Android SDK Manager出现无法更新或更新太慢,如下方法可完美解决此问题 1. 打开..\Android\sdk\SDK Manager.exe  2.

  7. Linux下实现秒级定时任务的两种方案

    Linux下实现秒级定时任务的两种方案(Crontab 每秒运行): 第一种方案,当然是写一个后台运行的脚本一直循环,然后每次循环sleep一段时间. while true ;do command s ...

  8. Rsync 软件的工作方式

    1.守护进程方式(socket)  语法: Access via rsync daemon: Pull: rsync [OPTION...] [USER@]HOST::SRC... [DEST] rs ...

  9. WebFlux Spring Security配置

    最小化可运行配置 package com.terwergreen.bugucms.config; import org.apache.commons.logging.Log; import org.a ...

  10. 5 Tips for Building a Winning DevOps Culture

    对于企业来说,前途未卜的改变往往很难发生,就像航海一样,重复的往往是久经验证的安全航线,这点在DevOps文化的构建上同样如此.近日,CA Technologies的高级策略师Peter Waterh ...