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

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

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

上代码

<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. Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  2. sencha touch NavigationView 源码详解（注释）

    Ext.define('Ext.navigation.View', { extend: 'Ext.Container', alternateClassName: 'Ext.NavigationView ...

  3. Telnet是什么意思又是什么协议 Telnet有什么作用及功能

    Telnet是teletype network的缩写,专业的说,Telnet是Internet上远程登录的一种程序:它可以让您的电脑通过网络登录到网络另一端的电脑上,甚至还可以存取那台电脑上的文件. ...

  4. tornado 数据库操作

    tornado是python的web框架,web程序开发中数据库操作是必须的. 安装: tornado的官方文档中提供的说明比较少,而且提供的模块中未找到数据库方面的模块,难道没有针对数据库操作进行封 ...

  5. [移动] Xamarin install

    It was not possible to complete an automatic installation. This might be due to a problem with your ...

  6. python selenium操作表格式元素实例

    很多时候,网页上的布局都是表格形式的,如出下面这样的 这种网页类型在自动化中比较头痛,需要很多判断,下面就举个例子,这里以深圳出入境网页为例,http://yysl.sz3e.com/wsyysq/s ...

  7. MONGOOSE – 让NODE.JS高效操作MONGODB(转载)

    Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为JavaScript对象以供你在应用中使用. ...

  8. Shell转义字符与变量替换

    转义字符 含义 \\ 反斜杠 \a 警报,响铃 \b 退格(删除键) \f 换页(FF),将当前位置移到下页开头 \n 换行 \r 回车 \t 水平制表符(tab键)  \v 垂直制表符 vim te ...

  9. postgresql----网络地址类型和函数

    本人对网络这块实在是搞不清楚,要是能有人推荐一下资料就好了!不知道有没有跟我一样呢?!所以在这里先贴一点从其他地方搞来的一些IPv4的东东. IPv4主要包括一下5类地址 A类: 0 7位 网络号 2 ...

  10. Laravel 查询包括软删除的记录

    查询结果包括已被软删除的记录: Model::withTrashed()->get(); 只查询软删除记录: Model::onlyTrashed()->get(); PS:个人博客-La ...