当文字超出DIV宽度时，超出的文字部分省略，并用显示省略号代替，css代码如下：

div.ellipsis {

    padding-left: 5px;

    text-align: left;

    text-overflow:ellipsis;

    overflow: hidden;

    white-space: nowrap;

}

重要前提是DIV为固定宽度。
<end>

CSS实现超出DIV宽度文字自动隐藏并显示省略号的更多相关文章

  1. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  2. Html内容超出标记宽度后自动隐藏

    我们在显示长文本时,往往需要去在C#端去截取字符,但这绝对不是一个好方面,因为我们的长文本往往都是代HTML标记的,你一个载不好,就会出现乱码问题(出现半个HTML标记),而比较好的作法就是通过CSS ...

  3. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  4. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  5. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  6. CSS文本超出2行就隐藏并且显示省略号

    今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用 ...

  7. css 文本超出容器长度后自动省略的方法!

    我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代 ...

  8. 让超出DIV宽度范围的文字自动显示省略号...

    关键是:text-overflow: ellipsis; div.titleholder { font-family: ms sans serif, arial; font-size: 8pt; wi ...

  9. 超出div宽度范围的文字进行省略号省略，在鼠标移上去以后显示完整的内容

    一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...

随机推荐

  1. Nginx（二）-- 配置文件之虚拟主机配置

    1.配置文件与解释 #user nobody; worker_processes 1; # 设置工作子进程,默认是1个工作子进程,可以修改,一般设置为CPU的总核数 #error_log logs/e ...

  2. HttpPost导包遇到的问题

    直接在当前项目 build.gradle文件修改如下 android { useLibrary 'org.apache.http.legacy' compileSdkVersion 24 buildT ...

  3. 说说新唐ARM9（未完待续）

    针对通用32位微控制器的NUC970系列嵌入了由RISC机器有限公司设计的RISC处理器ARM926EJ-S,运行频率高达300 MHz,具有16 KB的I-cache,16 KB的D-cache和M ...

  4. Host ‘host_name’ is blocked

    参考:http://web2.0coder.com/archives/163 之前服务器遇到了这个错误: Host ‘host_name‘ is blocked because of many con ...

  5. lua中类的实现原理和实践

    一.基础概念  Lua 本身是函数式的语言,但借助 metatable (元表)这个强大的工具,Lua 实现操作符重载易如反掌.. 下文将详细的解释在Lua中实现类的原理,涉及到的细节点将拆分出来讲, ...

  6. [直观学习排序算法] 视觉直观感受若干常用排序算法 以及 iOS 资料

    http://www.zhfish.net/?s=点击范围 1 快速排序 介绍: 快速排序是由东尼·霍尔所发展的一种排序算法.在平均状况下,排序 n 个项目要Ο(n log n)次比较.在最坏状况下则 ...

  7. poj_2286 线段树

    题目大意 在墙上贴海报,墙壁是由一排连续的瓷砖铺成,海报贴在墙壁上必须占据连续的几块瓷砖,海报可以互相覆盖,问最后可以看见几张海报(未被完全覆盖). 题目分析 墙壁是由连续的一个区间构成,每个海报占据 ...

  8. 【LINUX】SVN 代码提交之后。同步到web目录下

    1  当你使用svn在成功提交一个新版本的时候,svn仓库目录下的hook文件夹下的post-commit脚本会运行 用shell写一个脚本,在提交完版本后,自动在web目录运行一下svn updat ...

  9. MQTT协议笔记之mqtt.io项目Websocket协议支持

    前言 MQTT协议专注于网络.资源受限环境,建立之初不曾考虑WEB环境,倒也正常.虽然如此,但不代表它不适合HTML5环境. HTML5 Websocket是建立在TCP基础上的双通道通信,和TCP通 ...

  10. JS-键盘事件之方向键移动元素

    注意三点: 1:事件名称onkeydown. 2:事件加给document,而非window. 3: 把元素的top,left值分别用offsetTop,offsetLeft来设定. <!DOC ...