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

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

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

上代码

<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. [原]F5负载均衡激活license

    一.pc用网线连接上f5的管理口,开机,ping   192.168.1.245 二.用浏览器登录:https://192.168.1.245     用户名 admin  密码 admin

  2. C语言程序设计--指针基础

    指针 指针是一种特殊变量(存储内存地址).当然它本身也是占用内存的,所以会带来一个问题,那就是指针存在以下概念:指针的类型(int* 一个整型指针),指针指向的类型(int* p = 5, 说明指针p ...

  3. Dokcer制作nginx镜像，提交镜像至仓库

    生成Dockerfile FROM docker.io/hagaico/centos-base-6.5:latest MAINTAINER yatho yatho@163.com ENV DEBIAN ...

  4. 如何搭建Packetbeat性能监控

    安装与配置JDK 1.  将jdk-8u111-linux-x64.tar.gz上传至Linux的/opt目录下,并执行解压命令: tar -zxvf jdk-8u111-linux-x64.tar. ...

  5. 分布式搜索elasticsearch几个概念解析

    原文链接:http://blog.csdn.net/july_2/article/details/24367177 介绍下es的几个概念:cluster     代表一个集群,集群中有多个节点,其中有 ...

  6. spring boot 通过Maven + tomcat 自动化部署

    使用maven创建的springboot项目,默认是jar包,springboot还有自己带的tomcat. 现在为了简单实现本地自动发布项目到服务器,需要通过发布war包的形式,通过maven将项目 ...

  7. iOS - APP审核Guideline 2.5.1被拒,使用了私有API

    最近iOS 审核被拒,说是使用了私有API:com.apple.springboard.lockcomplete 具体内容如下: 发件人 Apple . Performance: Software R ...

  8. 力推：无限制下载神器aria2

    百度网盘是一个非常方便的存储以及寻找资源的好帮手,但是百度为了挣钱把非会员的下载网速一再限制(无力吐槽),还还好一直使用油猴插件加idm下载神器来下载百度云文件.奈何idm对bt种子文件不支持下载,终 ...

  9. HDU 1754 - I Hate It　&　UVA 12299 - RMQ with Shifts　-　[单点/区间修改、区间查询线段树]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 Time Limit: 9000/3000 MS (Java/Others) Memory Li ...

  10. 【紫书】 Unix ls UVA - 400 模拟

    题意:中文版https://vjudge.net/problem/UVA-400#author=Zsc1615925460 题解:首先读取字符,维护一个最长字符串长度M,再排序. 对于输出,写一个pr ...