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

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

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

上代码

<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. 【咸鱼教程】DragonBones帧动画、骨骼json、极速、二进制

    公司的人想用龙骨,但是同事在官网找不着二进制的资料...于是写了个简单demo. demo中包含了帧动画.骨骼动画json.极速和二进制的资源和代码 测试环境:DragonBonesPro 5.5  ...

  2. 常用AT指令集 (转)

    常 用 AT 命 令 手 册 .常用操作 1.1 AT 命令解释:检测 Module 与串口是否连通,能否接收 AT 命令: 命令格式:AT<CR> 命令返回:OK (与串口通信正常) ( ...

  3. IOS根据两个经纬度计算相距距离

    //第一种苹果自带的 CLLocation *orig=[[[CLLocation alloc] initWithLatitude:[mainDelegate.latitude_self double ...

  4. Spring加载xsd文件报错：because 1) could not find the document; 2) the document could not be read...

    Spring启动时加载xml文件的过程: spring在加载xsd文件时总是先试图在本地查找xsd文件(spring的jar包中已经包含了所有版本的xsd文件),如果没有找到,才会转向去URL指定的路 ...

  5. Git - 使用BitBucket和SourceTree进行源代码管理遇到POST git-receive-pack (chunked)

    我使用的是SourceTree Mac版,提交到BitBucket时出现 一直处于 POST git-receive-pack (chunked)  状态,经过百度,解决问题 在使用SourceTre ...

  6. Shell while

    while commanddo ...done c=0while [ $c -lt 5 ]do c='expr $c+1' echo $cdone

  7. Redis的启动过程

    本文主要介绍Redis启动加载过程,总体上可以分为如下几步: 1. 初始化全局服务器配置 2. 加载配置文件(如果指定了配置文件,否则使用默认配置) 3. 初始化服务器 4. 加载数据库 5. 网络监 ...

  8. easyui treegrid idField 所在属性中值有花括号（如Guid）当有鼠标事件时会报错，行记录一下

    easyui treegrid idField 所在属性中值有花括号(如Guid)当有鼠标事件时会报错,行记录一下

  9. Codeforces Round #433 (Div. 2, based on Olympiad of Metropolises)

    A. Fraction 题目链接:http://codeforces.com/contest/854/problem/A 题目意思:给出一个数n,求两个数a+b=n,且a/b不可约分,如果存在多组满足 ...

  10. OpenJ_Bailian - 4152 最佳加法表达式 dp

    http://bailian.openjudge.cn/practice/4152?lang=en_US 题解 :dp[i][j]代表前i个字符加j个加号可以得到的最小值,于是dp[i+k[j+1]可 ...